javascript - 在 Internet Explorer 中使用 JS 访问对象内部的 SVG

Question

我有一个测试页:http://benfrain.com/playground/svg-test/

在上面我以多种方式插入了相同的 SVG(img、对象、内联和背景图像)

我还实现了use从 SVG 中重用 def 的方法(仅适用于 object 插入方法和“内联”插入方法)。

在控制台中，您将看到我还尝试从每个插入方法访问 SVG 内容(我知道 img 和背景图像不应该通过脚本访问 - 我只是证明这一点)。

但是，在任何版本的 Internet Explorer (IE9+) 上，object插入方法 无法加载从内部引用的外部 CSS (如注释中所述，IE 需要替代链接机制)(通过 xlink，如果它正常工作，您将看到一个 6px 宽的笔划)并且它无法通过 JavaScript 访问(适用于所有其他常青浏览器)(我的错误)。

谁能解释一下为什么？我查看了规范:http://www.w3.org/TR/html5/embedded-content-0.html#the-object-element但我必须承认一些技术细节超出了我的理解范围。

更新:根据下面罗伯特的评论，我对上面的测试页面做了一些调整。

首先，该对象可以通过脚本访问(菜鸟错误)。然而，奇怪的现象仍然比比皆是:

如果 SVG 具有以下格式的链接:<?xml-stylesheet href="styles.css" type="text/css"?>然后 IE11 将该样式表中的样式应用于 SVG，无论它是通过 img、background-image、内联还是对象插入到页面中(Safari/Firefox/Chrome 仅当 SVG 内联插入或通过 object 插入时才应用样式) .

Answer 1

有一个外部的 w3c 测试套件页面 <use> : http://www.w3.org/Graphics/SVG/Test/20110816/svg/struct-use-05-b.svg

implementation matrix提示IE9不支持外部<use>我不确定为什么 Firefox 被列为失败，因为我认为即使在那时它也应该通过该特定测试。

对于<object>问题，需要在<object>的onload事件中运行脚本标签。我猜你对其他 UA 很幸运，因为你基本上有竞争条件。

大概 IE 不支持使用 html 语法包含样式表。试试XML syntax相反:<?xml-stylesheet href="mystyle.css" type="text/css"?>

允许图像使用外部文件会造成隐私泄露，这就是 Firefox、Chrome 和 Safari 不允许这样做的原因。如果您将 CSS 转换为数据 URL，则可以使用链接元素。