SVG 在 IE 11 中使用带有外部引用的标签答案

【问题标题】：SVG use tag with external reference in IE 11SVG 在 IE 11 中使用带有外部引用的标签
【发布时间】：2014-04-26 08:07:19
【问题描述】：

我想在 html5 页面中包含一个内联 svg，其中包含引用不同 svg 文件中的元素的“使用”标签，由 URL 引用。这是 SVG 规范的一部分，在 Chrome 33 和 FireFox 27 中有效（正如我尝试过的那样）。它似乎在 IE 11 中无效。

我的问题是：有没有办法在所有三种浏览器中都可以做到这一点（同时仍然保持外部 svg 而不使用 javascript）？

在实际用例中，定义是静态的、大的，并且在多个页面之间以及每个页面上的多个内联 svg 之间共享。我希望将定义下载一次并缓存起来，然后在任何地方使用。

我知道可以使用 javascript 来执行此操作，但由于此使用范例是 SVG 规范的预期部分并受 Chrome 和 FF 支持，我希望我可以这样做并且我是只是缺少一些关于 IE 如何想要 HTML 或 SVG 的细节。

这是我的 HTML 示例：

<!DOCTYPE html>
<html>
<head></head>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100px" width="100px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g externalResourcesRequired="true">
<use xlink:href="defs.svg#path-1" fill="#000000"></use>
<use xlink:href="defs.svg#path-2" fill="#000000"></use>
</g>
</svg>
</body>
</html>

这里是上面引用的 defs.svg 文件：

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<path d="M10,10L20,10L20,20L10,20" id="path-1"></path>
<path d="M30,30L50,30L50,50L30,50" id="path-2"></path>
</defs>
</svg>

【问题讨论】：

这篇文章值得一看，虽然还没有解决方案。据我所知，Edge 现在可以引用外部 svg 文件。 css-tricks.com/svg-use-with-external-reference-take-2

标签： html internet-explorer svg

【解决方案1】：

这个问题很老，但我遇到了它并想对此给出一个基本提示：

正如https://developer.mozilla.org/de/docs/Web/SVG/Element/use 描述的那样，IE 11 不支持使用“use”svg-tag 从外部 URI 加载。

我建议使用其他库，例如https://github.com/jonathantneal/svg4everybody , https://github.com/iconic/SVGInjector

基本上，您可以编写自己的 js-lib，其中：

您检查浏览器/寻找功能支持 (modernizr -> Example 1 , Example 2
在 IE11 上，从“use”标签获取引用，使用 svg-sprite 中的路径标签更改它

【讨论】：

是的，我知道我目前正在使用的解决方法。我希望 IE 团队中的某个人会注意并修复他们损坏的浏览器。
@FerTo 你能告诉更多关于use标签的替换吗？
@Nikita 到底是什么？我建议使用一个为你做的工具，或者可能有一个 polyfill 来启用像 polyfill.io 这样的 svg 使用标签。

【解决方案2】：

svg4everybody 使用 requestAnimationFrame，导致调用过多。我写了一个简单而轻量级的 polyfill，目的是在浏览器本身失败时支持带有外部引用的元素。这个 polyfill 使用特征检测而不是浏览器嗅探。在github上：https://github.com/Keyamoon/svgxuse

现场演示：https://icomoon.io/svgxuse-demo

【讨论】：