链接到由IMG标记嵌入的SVG中的CSS [英] Linking to CSS in an SVG embedded by an IMG tag
问题描述
我有一个页面，其中包括几个SVG文件。要同步这些SVG文件的样式，我想创建一个样式表来保存所有的样式信息。
然而，当包括如下的SVG时， 。任何人有解决方案，或者只是不可能链接到由< img src =.../> ？
请参阅下面的示例代码。当在浏览器中直接加载 pic.svg 时，将应用所有样式，并且可以看到一个绿色矩形。但是当打开 page.htm 时，所有的都是一个黑色的矩形。很明显，没有应用定义的样式。
page.htm
<！DOCTYPE html>
< html>
< body>
< img src =pic.svgstyle =width：100px; height：100px; />
< / body>
< / html>
pic.svg
<？xml version =1.0standalone =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 / csshref =styles.css？>
< svg version =1.1
xmlns =http://www.w3.org/2000/svg
viewBox =0 0 100 100
> ;
< rect x =10y =10width =80height =80/>
< / svg>
styles.css
$ b b
rect {
stroke：black;
fill：green;
}
EDIT
从一个回答，短暂的时间出现在这里，我得到了此链接规格和以下引文。
嵌入HTML或XML文档的独立SVG文档与'img'，'object'（HTML）或'image'（SVG）元素
[...]
$ b从您的链接引用样式表定义在引用的SVG文档中的任何位置（在样式元素或样式属性中，或在与样式表处理指令关联的外部样式表中 ）适用于整个SVG文档，但不影响引用文档（可能是HTML或XHTML）。
另一种方法是使用< object& / code>标记： -
< object type =image / svg + xmldata = pic.svgwidth =100height =100>< / object>
这是一个很大的耻辱，< img> 标签不工作。我不想搞砸通过将SVG转换为数据URI的黑客。
请注意，在我测试的昨天，< img> 标签方法在IE10中工作，但不是Chrome或FireFox。
我不知道为什么< object> ，而< img> 监督？
I have a page, that includes several SVG files. To synchronize the styling of those SVG files I wanted to create a single stylesheet to hold all styling information.
However, when including the SVG like below, the CSS wont get applied. Anybody having a solution to this or is it just not possible to link to other (CSS) files in an SVG referenced by <img src="..." />?
See the example code below. When loading pic.svg directly in the browser, all styles get applied and one can see a green rectangle. But when opening page.htm all there is to see is a black rectangle. So obviously none of the defined styles was applied.
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
From an answer, that for a short time appeared here, I got this link to the spec and the following citation. In my opinion this states, that the above code should work!
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)."
An alternative is to use the <object> tag in your html :-
<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>
It's a BIG shame the <img> tag won't work. I don't want to mess about hacking with converting the SVG to a data URI. It's to do with cross-site vulnerabilities on indirectly loading resources and the use of an "Open Redirector".
Note that in my testing lastnight, the <img> tag method DOES work in IE10, but neither Chrome nor FireFox.
I don't know why <object> is allowed and <img> isn't. An oversight?
这篇关于链接到由IMG标记嵌入的SVG中的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
