css - HTML5 内联 SVG 与外部 CSS

Question

HTML5 文档中的外部 CSS 和内联 SVG 确实给我带来了困难。

我目前正在 Mac 版 Chrome 的最新版本下进行开发，希望获得适用于 Firefox 的 SVG(使用外部样式表进行样式设置)。

对于 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">

Here's an example .