我有一个页面,其中包括几个SVG文件.为了同步这些SVG文件的样式,我想创建一个样式表来保存所有样式信息.
但是,当包含如下所示的SVG时,CSS将不会被应用.有人解决这个问题,或者只是无法链接到引用的SVG中的其他(CSS)文件<img src="..." />？
请参阅下面的示例代码.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;
}
编辑
从答案来看,这里出现了很短的时间,我得到了这个链接到规范和以下引文.在我看来,这说明上述代码应该有效!
使用"img","object"(HTML)或"image"(SVG)元素嵌入HTML或XML文档中的独立SVG文档
[...]
引用链接"在引用的SVG文档中的任何位置定义的样式表(在样式元素或样式属性中,或在与样式表处理指令链接的外部样式表中)适用于整个SVG文档,但不影响引用文档(也许HTML或XHTML)."
Dav*_*err 19
另一种方法是<object>在你的HTML中使用标签: -
<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>
<img>标签不起作用真是太遗憾了.我不想把将SVG转换为数据URI的黑客行为搞乱.这与间接加载资源的跨站点漏洞和使用"Open Redirector"有关.
请注意,在我昨晚的测试中,<img>标签方法在IE10中运行,但Chrome和FireFox都没有.
我不知道为什么<object>被允许而<img>不是.疏忽？
Rob*_*son 11
出于隐私原因,图像必须是独立文件.如果将样式表编码为数据uri,则可以使用CSS.例如
<?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="data:text/css;charset=utf-8;base64,cmVjdCB7IA0KICAgIHN0cm9rZTogYmxhY2s7DQogICAgZmlsbDogZ3JlZW47DQp9" ?>
<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>
有各种数据URI的在线转换器.