SVG在IE 11中使用带外部引用的标记 [英] SVG use tag with external reference in IE 11
问题描述
我想在html5页面中包含一个内联svg，其中包含引用URL引用的不同svg文件中的元素的use标记。这是SVG规范的一部分，并且在Chrome 33和FireFox 27中有效（我已尝试过）。它似乎无法在IE 11中运行。
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.
My问题是：有没有办法做到这一点（同时仍然维护外部svg而不使用javascript）在所有三种浏览器中都有效？
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?
在实际使用案例中，这些定义是静态的，大的，并且在多个页面之间以及每个页面上的多个内联svgs之间共享。我希望下载一次定义并缓存，然后在任何地方使用。
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.
我知道可以使用javascript执行此操作，但因为此使用范例是预期的一部分SVG规范并得到Chrome和FF的支持，我希望我能这样做，而且我只是错过了IE想要HTML或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.
以下是我的示例HTML：
Here is my example 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文件：
And here is the defs.svg file referenced above:
<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>
推荐答案
svg4everybody使用requestAnimationFrame，这会导致调用过多。我写了一个简单的轻量级填料，用于支持< use>浏览器本身失败时带有外部引用的元素。此polyfill使用特征检测而不是浏览器嗅探。它位于github上： https://github.com/Keyamoon/svgxuse
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
现场演示： https://icomoon.io/svgxuse-demo
这篇关于SVG在IE 11中使用带外部引用的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
