html – 链接到由IMG标签嵌入的SVG中的CSS

我有一个页面,包括几个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).”

解决方法

另一种方法是使用< object>你的html标签：

<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>

这是一个很大的耻辱< img>标签将无法正常工作.我不想混淆将黑客转换成数据URI的黑客.这是关于间接加载资源的跨站点漏洞和使用“打开重定向器”.

请注意,在我昨天的测试中,< img>标签方法在IE10中工作,但不支持Chrome和FireFox.

我不知道为什么< object>被允许,< img>不是.监督？

html – 链接到由IMG标签嵌入的SVG中的CSS

解决方法

相关文章