logo标签列表

IE 11中使用外部引用的SVG use标签

htmlinternet-explorersvg
14

我希望在一个包含“use”标签的内联SVG中，将另一个SVG文件中的元素引用通过URL链接进入HTML5页面中。这是SVG规范的一部分，在Chrome 33和FireFox 27中已经可以使用（我已经尝试过），但在IE 11中似乎无法工作。

我的问题是：有没有一种方法可以在这三个浏览器中实现这一点（同时仍保留外部SVG并且不使用JavaScript）？

在实际使用中，定义是静态的、大的，并且在多个页面和每个页面上的多个内联SVG之间共享。我想要下载并缓存定义，然后在任何地方都可以使用。

我知道可以使用JavaScript实现这一点，但由于这种使用范例是SVG规范的一部分，并且得到了Chrome和Firefox的支持，我希望可以通过这种方式实现，而且我只是错过了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文件现在是可行的。 https://css-tricks.com/svg-use-with-external-reference-take-2/ - moubi
2个回答
33

svg4everybody使用requestAnimationFrame，这会导致调用太多次。我编写了一个简单且轻量级的polyfill，专门支持<use>元素中的外部引用，以解决浏览器本身的问题。该polyfill使用功能检测而非浏览器嗅探。它在github上： https://github.com/Keyamoon/svgxuse

在线演示：https://icomoon.io/svgxuse-demo

3

这个问题已经比较老了，但我遇到了它，并想给出一个基本提示：

正如https://developer.mozilla.org/de/docs/Web/SVG/Element/use所描述的，使用“use”svg标签从外部URI加载在IE 11中不被支持。

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

基本上，您可以编写自己的js库：

  • 检查浏览器/查找功能支持（modernizr->示例1，示例2）
  • 在IE11中，获取“use”标记的引用，将其更改为来自svg-sprite的路径标记
5
是的，我知道解决方法，并正在使用。我希望IE团队能注意并修复他们损坏的浏览器。 - James D
@FerTo 你能详细讲解一下use标签的替换吗？ - user7499416
@Nikita 什么具体操作？我建议使用一个可以为您完成此操作的工具，或者也许有一个 polyfill 可以启用 svg use 标签，例如 polyfill.io。 - Fer To
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接