Question

我有一个带有两个svg使用元素的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 table

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

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

1 个答案: