在 Internet Explorer 中使用 JS 访问对象内部的 SVG
Accessing SVG inside object with JS in Internet Explorer
我有一个测试页：http://benfrain.com/playground/svg-test/
我在上面以多种方式插入了相同的 SVG（img、对象、内联和背景图像）
我还实现了 use 从 SVG 中重新使用 defs 的方法（仅适用于 object 插入方法和 'inline' 插入方法）。
在控制台中，您会看到我也在尝试从每种插入方法访问 SVG 内容（我知道 img 和背景图像不应该通过脚本访问 - 我只是在证明这一点）。
但是，在任何版本的 Internet Explorer (IE9+) 上，object 插入方法 无法加载外部 CSS（如注释中所述，IE 需要从内部引用的替代 linking 机制）（通过 xlink，如果它正在工作，你会看到一个 6px 宽的笔划）并且它 无法通过 JavaScript（适用于所有其他常青浏览器）（我的错误）。
谁能解释一下为什么？我已经查看了规范：http://www.w3.org/TR/html5/embedded-content-0.html#the-object-element 但我必须承认一些技术细节超出了我的理解范围。
更新：
根据下面罗伯特的评论，我对上面的测试页面做了一些调整。
首先，对象 是 可通过脚本访问的（菜鸟错误）。然而，奇怪的事情仍然比比皆是：
如果 SVG 具有以下格式的 link：<?xml-stylesheet href="styles.css" type="text/css"?> 然后 IE11 将该样式表中的样式应用于 SVG，无论它是通过 img、背景图像、内联插入到页面中的或对象（Safari/Firefox/Chrome 仅在 SVG 内联插入或通过 object 插入时应用样式）。
有一个用于外部 <use> 的 w3c 测试套件页面：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，则可以使用 link 元素。
我有一个测试页：http://benfrain.com/playground/svg-test/
我在上面以多种方式插入了相同的 SVG（img、对象、内联和背景图像）
我还实现了 use 从 SVG 中重新使用 defs 的方法（仅适用于 object 插入方法和 'inline' 插入方法）。
在控制台中，您会看到我也在尝试从每种插入方法访问 SVG 内容（我知道 img 和背景图像不应该通过脚本访问 - 我只是在证明这一点）。
但是，在任何版本的 Internet Explorer (IE9+) 上，object 插入方法 无法加载外部 CSS（如注释中所述，IE 需要从内部引用的替代 linking 机制）（通过 xlink，如果它正在工作，你会看到一个 6px 宽的笔划）并且它 无法通过 JavaScript（适用于所有其他常青浏览器）（我的错误）。
谁能解释一下为什么？我已经查看了规范：http://www.w3.org/TR/html5/embedded-content-0.html#the-object-element 但我必须承认一些技术细节超出了我的理解范围。
更新： 根据下面罗伯特的评论，我对上面的测试页面做了一些调整。
首先，对象 是 可通过脚本访问的（菜鸟错误）。然而，奇怪的事情仍然比比皆是：
如果 SVG 具有以下格式的 link：<?xml-stylesheet href="styles.css" type="text/css"?> 然后 IE11 将该样式表中的样式应用于 SVG，无论它是通过 img、背景图像、内联插入到页面中的或对象（Safari/Firefox/Chrome 仅在 SVG 内联插入或通过 object 插入时应用样式）。
有一个用于外部 <use> 的 w3c 测试套件页面：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，则可以使用 link 元素。