我有一个页面,包括几个SVG文件.要同步这些SVG文件的样式,我想创建一个样式表来保存所有样式信息.
但是,当包含如下的SVG时,CSS不会被应用.任何有这个解决方案的人,或者不可能链接到< img src =“...”/>引用的SVG中的其他(CSS)文件.
请参阅下面的示例代码.在浏览器中直接加载pic.svg时,所有样式都可以应用,可以看到一个绿色的矩形.但是当打开page.htm全部都看到是一个黑色的矩形.所以显然没有一个定义的样式被应用.
page.htm
<!DOCTYPE html>
<html>
<body>
<img src="pic.svg" style="width: 100px; height: 100px;" />
</body>
</html>
pic.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="styles.css" ?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
>
<rect x="10" y="10" width="80" height="80" />
</svg>
styles.css的
rect {
stroke: black;
fill: green;
}
编辑
从一个答案,这个短暂的时间出现在这里,我得到了this link to the spec和以下引文.在我看来,这表示上述代码应该工作！
Stand-alone SVG document embedded in an HTML or XML document with the ‘img’,‘object’ (HTML) or ‘image’ (SVG) elements
[…]
Citing from your link “Style sheets defined anywhere within the referenced SVG document (in style elements or style attributes,or in external style sheets linked with the style sheet processing instruction) apply across the entire SVG document,but do not affect the referencing document (perhaps HTML or XHTML).”
