简体繁体 English

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

[英]SVG use element refering external file doesn't work in Safari

原文 2012-07-02 20:17:58 1 2 html/ svg/ safari/ xlink

I have a HTML file with inline SVG, which in turn refers to SVG elements in external SVG file with library elements. 我有一个带有内联SVG的HTML文件，后者又引用带有库元素的外部SVG文件中的SVG元素。 It uses a <use> elements with xlink:href="Library.svg#libraryShapeID" . 它使用带有xlink:href="Library.svg#libraryShapeID"的<use>元素。 It works as a breeze in Opera and Firefox, but doesn't work in Safari. 它在Opera和Firefox中轻而易举，但在Safari中不起作用。 I've made a simple test file here: 我在这里做了一个简单的测试文件：

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

Is it some browser bug or am I doing something wrong? 是一些浏览器错误还是我做错了什么？ How should I rewrite it to make it work in Safari too? 我应该如何重写它以使其在Safari中工作？

2 个解决方案

There was a bug about this on Webkit but it has been fixed for the Version: 420+ BUT the bug for Fragment identifier is still not solved. 在Webkit上有一个关于这个的错误，但它已针对版本修复：420+但是片段标识符的错误仍未解决。

Someone gave an answer: Importing external SVG (with WebKit) using XMLHttpRequest. 有人给出了答案：使用XMLHttpRequest 导入外部SVG（使用WebKit）。 Quite unfortunate but in the meantime, I guess working. 非常不幸，但与此同时，我想工作。

I realize that this is an old question. 我意识到这是一个老问题。 But as this method of using SVGs has become more popular these days, I wrote a polyfill to make this technique work in browsers that fail to load the external SVG by default. 但是现在这种使用SVG的方法变得越来越流行，我编写了一个polyfill来使这种技术在默认情况下无法加载外部SVG的浏览器中运行。 At the time of writing this, IE9+ doesn't support referencing external SVGs in use elements. 在撰写本文时，IE9 +不支持在使用元素中引用外部SVG。 The polyfill that I wrote is quite simple and lightweight; 我写的polyfill非常简单轻巧; it detects whether the SVG has failed to load and if so, sends a GET request to fetch it. 它检测SVG是否加载失败，如果是，则发送GET请求以获取它。 It will then prepend it to body. 然后它将它添加到身体。