可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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 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?

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.

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.

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>

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>

回答1:

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

Live demo: https://icomoon.io/svgxuse-demo

回答2:

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/use describes the use of the "use" svg-tag to load from external URI isn't supported in IE 11.

I would suggest to use additional libraries, e.g. https://github.com/jonathantneal/svg4everybody , https://github.com/iconic/SVGInjector

Basically, you could write your own js-lib where:

You check for the browser / look for the feature support (modernizr -> Example 1 , Example 2
On IE11 than get the reference from the "use" tag, change it with the path-tag from the svg-sprite