【发布时间】：2012-07-03 21:25:14
【问题描述】：
HTML5 文档中的外部 CSS 和内联 SVG 真的让我很难受。
我目前正在使用最新版本的 Mac 版 Chrome 进行开发，并希望获得我的 SVG，它使用外部样式表进行样式设置，适用于 Firefox。
对于 Chrome，在我的网页样式表中包含我的 SVG-CSS 可以正常工作。我只是设计了所有的 html 元素，然后是 SVG 的东西。我的样式表看起来像这样：
body {
//blalba
}
<![CDATA[
line {
//blabla
}
circle {
//blabla
}
]]>
（在 chrome 下工作正常）
现在，如果我走这条路，我在 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
我还仔细检查了我的样式表的路径。我做错了什么？
感谢您的帮助！ :)
【问题讨论】：
-
样式表中的 CDATA 部分通常不是必需的。