0

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

在其上，我以多种方式插入了相同的 SVG（img、object、inline 和 background 图像）

我还实现了use在 SVG 中重用 defs 的方法（仅适用于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、inline 还是对象插入到页面中（Safari/Firefox/Chrome 仅应用样式，如果SVG 是内联或通过object) 插入的。

4

1 回答 1

1

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

实施矩阵表明IE9 不支持外部<use>我不确定为什么 Firefox 被列为失败，因为我认为即使在那时它应该已经通过了特定的测试。

对于该<object>问题，您需要在<object>标签的 onload 事件中运行脚本。我猜你只是幸运地使用了其他 UA，因为你基本上有一个竞争条件。

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

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

于 2015-02-11T10:52:52.023 回答