SVG 使用引用外部文件的元素在 Safari 中不起作用答案

【问题标题】：SVG use element refering external file doesn't work in SafariSVG 使用引用外部文件的元素在 Safari 中不起作用
【发布时间】：2012-07-02 20:17:58
【问题描述】：

我有一个带有内联 SVG 的 HTML 文件，该文件又使用库元素引用外部 SVG 文件中的 SVG 元素。它使用<use> 元素和xlink:href="Library.svg#libraryShapeID"。它在 Opera 和 Firefox 中轻而易举，但在 Safari 中不起作用。我在这里做了一个简单的测试文件：

http://sasq.comyr.com/Stuff/SVG/test01.html

是浏览器错误还是我做错了什么？我应该如何重写它以使其也能在 Safari 中工作？

【问题讨论】：

标签： html svg safari xlink

【解决方案1】：

有一个bug about this on Webkit，但它已针对版本：420+ 进行了修复，但Fragment identifier 的错误仍未解决。

有人给出了答案：Importing external SVG (with WebKit) using XMLHttpRequest。很不幸，但与此同时，我想工作。

【讨论】：

这是当前 Safari 中的错误吗？我使用的是 5.1.7 (6534.57.2) 版本，这似乎仍然是个问题。
@supertrue 正如我所说的错误 65344 - 使外部 URL 引用工作仍处于打开状态。

【解决方案2】：

我意识到这是一个老问题。但是随着这种使用 SVG 的方法近来变得越来越流行，我写了一个 polyfill 来使这种技术在默认情况下无法加载外部 SVG 的浏览器中工作。在撰写本文时，IE9+ 不支持在使用元素中引用外部 SVG。我写的 polyfill 非常简单和轻量级；它检测 SVG 是否加载失败，如果是，则发送 GET 请求来获取它。然后它会将其添加到正文中。

我希望你觉得它有用。如有任何反馈，我将不胜感激。

【讨论】：

感谢您的出色工作！ svg4everybody 在最近的 iPad 上失败了，但你的脚本有效！