链接到由 IMG 标签嵌入的 SVG 中的 CSS [英] Linking to CSS in an SVG embedded by an IMG tag
问题描述
我有一个页面，其中包含多个 SVG 文件.为了同步这些 SVG 文件的样式，我想创建一个样式表来保存所有样式信息.
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.
但是，当包含如下所示的 SVG 时，CSS 将不会被应用.任何人对此都有解决方案，或者只是无法链接到 <img src="..."/> 引用的 SVG 中的其他 (CSS) 文件?
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="..." />?
请参阅下面的示例代码.当在浏览器中直接加载 pic.svg 时，所有样式都会被应用，并且可以看到一个绿色矩形.但是当打开 page.htm 时，只看到一个黑色矩形.很明显，没有应用任何定义的样式.
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;
}
编辑
从一个答案中，我得到了该规范的链接 和以下引文.在我看来，上面的代码应该可以工作！
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!
嵌入在 HTML 或 XML 文档中的独立 SVG 文档，带有img"、object"(HTML) 或image"(SVG) 元素
[...]
从您的链接中引用在引用的 SVG 文档中的任何位置定义的样式表(在样式元素或样式属性中，或在与样式表处理指令链接的外部样式表中)应用整个 SVG 文档，但不影响引用文档(可能是 HTML 或 XHTML)."
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)."
推荐答案
另一种方法是在 html 中使用 标签:-
An alternative is to use the <object> tag in your html :-
<object type="image/svg+xml" data="pic.svg" width="100" height="100"></object>
很遗憾 标签不起作用.我不想通过将 SVG 转换为数据 URI 来搞砸.这与间接加载资源和使用开放重定向器"的跨站点漏洞有关.
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".
请注意，在我昨晚的测试中，<img> 标记方法在 IE10 中有效，但在 Chrome 和 FireFox 中均无效.
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屋！
