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

我有一个页面，其中包含几个SVG文件。为了同步这些SVG文件的样式，我想创建一个样式表来保存所有样式信息。链接到由IMG标签嵌入的SVG中的CSS

但是，当像下面那样包含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和以下引文。在我看来，这表明，上面的代码应该工作！嵌入到HTML或XML文档中的 'IMG'， '对象'（HTML）或 '图像'（SVG）

独立的SVG文档元素

[...]

从链接引用“引用的SVG文档中任何地方所定义的样式表（style元素或样式属性，或在与该样式表处理指令联外部样式表）申请整个SVG文档，但不要（参考HTML或XHTML）。“

来源

2012-09-25 Sirko

由于隐私原因，图片必须是独立文件。如果您将样式表作为数据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。

来源

2012-09-25 15:09:37

但在这种情况下，我会再次为每个SVG文件定义一个样式。这与我发布的规格提取物有什么关系？ – Sirko

如果您想共享样式定义，则不能使用图像标签。安全问题往往会忽略通常不考虑这些事情的规范要求。 –

显然，这也意味着您不能从通过HTML文件加载的SVG文件引用外部字体。 –

另一种方法是使用<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>不是。疏忽？

来源

2013-08-23 09:24:14

没有疏忽，这是关于人们对图像能力的普遍期望是什么，即你看到的是每次都是什么。尽管对象标签始终允许使用可编写脚本的复杂内容。 –

我最喜欢这个答案，得到一个字体，显示在我的SVG中，一直在推动着我整天！谢谢！ ......不过，你写的，它打破了我的HTML的休息，直到我关闭它像'HEIGHT =“100”>'需要某种原因关闭对象标记：http://scrabblehack.com/ –

莱昂：谢谢。我已经相应地更新了示例。 –

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

回答

相关问题