首页 文章

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

提问于
浏览 次
16

我有一个页面，其中包括几个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;
}

EDIT

从答案来看，在这里出现的短时间内，我得到了this link to the spec以及以下引文 . 在我看来，这说明上述代码应该有效！

使用'img'，'object'（HTML）或'image'（SVG）元素嵌入HTML或XML文档中的独立SVG文档[...]引用链接“在引用的任何位置定义的样式表SVG文档（在样式元素或样式属性中，或在与样式表处理指令链接的外部样式表中）适用于整个SVG文档，但不影响引用文档（可能是HTML或XHTML） .

html css svg

3 回答

  • 10

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

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

    <img> 标签赢得't work. I don'想要通过将SVG转换为数据URI来破解黑客行为，这是一件非常遗憾的事 . 这与间接加载资源和使用"Open Redirector"的跨站点漏洞有关 .

    请注意，在我昨晚的测试中， <img> 标记方法在IE10中可用，但Chrome和FireFox都没有 .

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

    回复于
  • 0

    出于隐私原因，图像必须是独立文件 . 如果将样式表编码为数据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有各种online converters .

    回复于
  • 19

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

    回复于

相关问题