Html SVG 在 IE 11 中使用带有外部引用的标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22516712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG use tag with external reference in IE 11
提问by James D
I want to include an inline svg in an html5 page that includes "use" tags that reference elements in a different svg file, referenced by URL. This is part of the SVG spec and works (as I've attempted it) in Chrome 33 and FireFox 27. It does not appear to work in IE 11.
我想在 html5 页面中包含一个内联 svg，该页面包含“use”标签，这些标签引用不同 svg 文件中的元素，由 URL 引用。这是 SVG 规范的一部分，在 Chrome 33 和 FireFox 27 中有效（正如我所尝试的那样）。它似乎在 IE 11 中无效。
My question is: is there a way to do this (while still maintaining the external svg and not using javascript) that works in all three browsers?
我的问题是：有没有办法做到这一点（同时仍然保持外部 svg 并且不使用 javascript）适用于所有三种浏览器？
In the actual use case, the definitions are static, large, and shared between a number of pages and among multiple inline svgs on each page. I want the definitions downloaded once and cached and then used everywhere.
在实际用例中，定义是静态的、大的，并且在多个页面之间以及每个页面上的多个内联 svg 之间共享。我希望定义下载一次并缓存，然后在任何地方使用。
I understand that it is possible to do this with javascript, but as this usage paradigm is an intended part of the SVG spec and supported by Chrome and FF, I am hoping that I can do it this way and that I'm just missing some detail of how IE wants the HTML or SVG.
我知道可以用 javascript 来做到这一点，但由于这种使用范式是 SVG 规范的预期部分，并由 Chrome 和 FF 支持，我希望我可以这样做，而我只是错过了一些IE 想要 HTML 或 SVG 的详细信息。
Here is my example HTML:
这是我的示例 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>
And here is the defs.svg file referenced above:
这是上面引用的 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>
回答by Keyamoon
svg4everybody uses requestAnimationFrame, which causes too many calls. I wrote a simple and lighweight polyfill for the very purpose of supporting <use> elements with external references when the browser itself fails. This polyfill uses feature detection rather than browser sniffing. It's on github: https://github.com/Keyamoon/svgxuse
svg4everybody 使用 requestAnimationFrame，导致调用过多。我编写了一个简单且轻量级的 polyfill，目的是在浏览器本身失败时支持带有外部引用的 <use> 元素。这个 polyfill 使用特征检测而不是浏览器嗅探。它在 github 上：https: //github.com/Keyamoon/svgxuse
Live demo: https://icomoon.io/svgxuse-demo
回答by Fer To
The question is old but I've came across it and want to give a basic hint to this:
这个问题很老，但我遇到了它，并想对此提供一个基本提示：
As https://developer.mozilla.org/de/docs/Web/SVG/Element/usedescribes the use of the "use" svg-tag to load from external URI isn't supported in IE 11.
正如https://developer.mozilla.org/de/docs/Web/SVG/Element/use描述的那样，IE 11 不支持使用“use”svg-tag 从外部 URI 加载。
I would suggest to use additional libraries, e.g. https://github.com/jonathantneal/svg4everybody, https://github.com/iconic/SVGInjector
我建议使用其他库，例如https://github.com/jonathantneal/svg4everybody，https://github.com/iconic/SVGInjector
Basically, you could write your own js-lib where:
基本上，您可以编写自己的 js-lib，其中：
