Question

我有一个页面，其中包含多个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以及以下引文。在我看来，这说明上述代码应该有效！

使用'img'，'object'（HTML）或'image'（SVG）元素嵌入HTML或XML文档中的独立SVG文档

[...]

引用您的链接“在引用的SVG文档中的任何位置定义的样式表（样式元素或样式属性，或与样式表处理指令链接的外部样式表中的）适用于整个SVG文档，但不影响引用文档（可能是HTML或XHTML）。“

Answer 1

另一种方法是在html中使用<object>标记： -

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

<img>标签不起作用真是太遗憾了。我不想把将SVG转换为数据URI的黑客行为搞乱。这与间接加载资源的跨站点漏洞和使用“Open Redirector”有关。

请注意，在我昨晚的测试中，<img>标记方法在IE10中有效，但Chrome和FireFox均无效。

我不知道为什么<object>被允许而<img>不被允许。疏忽？

Answer 2

出于隐私原因，图片必须是独立文件。如果将样式表编码为数据uri，则可以使用CSS。 E.g。

<?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有各种online converters。

Answer 3

上面的答案很棒。不过，我发现最简单的方法是将原始SVG标签嵌入我的网页。这允许SVG继承我的页面CSS中声明的字体系列样式而没有问题...

链接到由IMG标记嵌入的SVG中的CSS

3 个答案: