Question

HTML5文档中的外部CSS和内联SVG确实让我很难过。

我目前正在使用最新版本的Chrome for Mac进行开发，并希望获得我的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

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

感谢您的帮助！：）

Answer 1

如果SVG内嵌HTML，为什么不像使用任何其他样式表一样使用link元素？

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

Here's an example

带外部CSS的HTML5内联SVG

1 个答案: