2

HTML5 文档中的外部 CSS 和内联 SVG 真的让我很难受。

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

对于 Chrome，在我的网页样式表中包含我的 SVG-CSS 可以正常工作。我只是设计了所有的 html 元素，然后是 SVG 的东西。我的样式表看起来像这样：

body {
  //blalba
}

<![CDATA[

line {
 //blabla
}

circle {
  //blabla
}

]]>

（在铬下工作正常）

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

我还仔细检查了我的样式表的路径。我究竟做错了什么？

感谢您的帮助！:)

4

1 回答 1

4

如果 SVG 在 HTML 中是内联的，为什么不像link其他样式表那样使用该元素呢？

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

这是一个例子。

于 2012-07-03T13:25:14.793 回答