Question

我想在html5页面中包含一个内联svg，其中包含引用URL引用的不同svg文件中的元素的“use”标记。这是SVG规范的一部分，并且在Chrome 33和FireFox 27中有效（我已尝试过）。它似乎无法在IE 11中运行。

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

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

我明白用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>

Answer 1

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

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

Answer 2

这个问题已经过时了，但我遇到过这个问题并希望给出一个基本的暗示：

由于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 - ＆gt; Example 1，Example 2
在IE11上，从“use”标签获取引用，使用svg-sprite中的path-tag更改它

SVG在IE 11中使用带外部引用的标记

2 个答案: