HTML5 Inline SVG与外部CSS

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

我目前正在开发最新版本的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>

，但它的作品无论是在浏览器也不在Firefox浏览器。我的样式表看起来像这样：

<![CDATA[ // <- if tried leaving this out, no change 

line { 
//blabla 
} 

circle { 
    //blabla 
} 

]]> // <- if tried leaving this out, no change

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

谢谢你的帮助！ :)

来源

2012-07-03 Macks

样式表中的CDATA节通常不是必需的。 –

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

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

Here's an example。

来源

2012-07-03 13:25:14 robertc

我认为，因为我在我的HTML样式的一个文件中使用了我的SVG样式，所以它没有工作的原因是因为我必须包含CSS的xml样式。这工作得很好，非常感谢你！ :) – Macks

HTML5 Inline SVG与外部CSS

回答

相关问题