帶有外部CSS的HTML5嵌入式SVG

Question

HTML5文檔中的外部CSS和內聯SVG確實給了我很大的麻煩。

我目前正在使用Mac的最新版本的Chrome進行開發，並希望獲得使用外部樣式表設置樣式的SVG，並且該樣式適用於Firefox。

對於Chrome，將我的SVG-CSS放在網頁的樣式表中可以正常工作。 我只是設置所有html元素的樣式，然后設置SVG的樣式。 我的樣式表如下所示：

body {
  //blalba
}

<![CDATA[

line {
 //blabla
}

circle {
  //blabla
}

]]>

（在chrome下工作正常）

現在，如果我走這條路，我在Firefox中的所有SVG元素都會被黑色填充，因此這似乎不起作用。 內聯CSS在SVG內可以正常工作 ，但是我無法在SVG內使用外部樣式表 。

這是我喜歡的代碼：

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="styles/style.css" ?>
<svg width="827" height="185" viewBox="0 0 827 185" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect class="background" x="0" y="10" width="825" height="125" />
</svg>

我以為這是正確的方法，但是它在Chrome和Firefox中均不起作用。 我的樣式表看起來像這樣：

<![CDATA[ // <- if tried leaving this out, no change

line {
 //blabla
}

circle {
  //blabla
}

]]> // <- if tried leaving this out, no change

我還仔細檢查了樣式表的路徑。 我究竟做錯了什么？

謝謝您的幫助！ :)

Answer 1

如果SVG是HTML內聯的，為什么不像其他樣式表那樣使用link元素呢？

<link rel="stylesheet" href="styles/style.css">

這是一個例子 。