带有外部CSS的HTML5内联SVG

Question

外部CSS和HTML5 5文档中的内联SVG确实给了我一段艰难的时光。

我目前正在开发最新版本的Chrome，并希望获得我的SVG，它的样式是外部样式表，为Firefox工作。

对于Chrome，让我的SVG在样式表中为我的网页工作很好。我只是设计了所有的html元素，然后是SVG-东西。然后我的样式表看起来如下所示：

body {
  //blalba
}

<![CDATA[

line {
 //blabla
}

circle {
  //blabla
}

]]>

(铬下工作良好)

现在，如果我走这条路，我在Firefox中的所有SVG元素都有一个黑色的填充，所以这似乎不起作用。Inline在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">

下面是一个例子。