svg - 从外部源链接的 SVG 使用不显示 svg 数据

Question

我有一个包含两个 svg use 元素的 html 页面：第一个引用内联 svg。第二个引用外部 svg 文件（相同的代码）。

我试图弄清楚为什么第二个示例不显示 svg 路径，即使内联的 SVG 代码与链接文件中的 SVG 代码完全相同。

https://s3.amazonaws.com/jagger/svg/index.html

  <svg class="svg-inline">
    <use xlink:href="#test" />
  </svg>

  <svg class="svg-external">
    <use xlink:href="sprite.svg#test" />
  </svg>


<svg width="0" height="0">
<symbol id="test" viewBox="0 0 600 600">
   <title>Test Icon</title>
   <rect id="svg_2" height="214.39594" width="481.62782" y="10" x="10" stroke-width="5" stroke="#000000" fill="none"/>
   <line fill="none" stroke="#000000" stroke-width="5" x1="10" y1="10" x2="400" y2="400" id="svg_1"/>
</symbol>
</svg>

Answer 1

使用外部精灵在所有现代浏览器的最新版本中工作

• 在实际的 IE 和旧浏览器版本中仍然存在问题
• 参见MDN <use> browser_compatibility 表

对于 IE（和旧版浏览器）只需使用polyfill svg4everybody