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

【问题标题】：SVG use linked from an external source not showing svg data从外部源链接的 SVG 使用不显示 svg 数据
【发布时间】：2017-02-17 00:37:28
【问题描述】：

我有一个包含两个 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>

【问题讨论】：

使用的链接必须是同一个域。你的不是那么失败。
@RobertLongson 如果我在本地托管 svg 文件并链接到 xlink:href="sprite.svg#test"，也会出现同样的问题
不是在 Firefox 上它不会，我们已经在构建过程中测试了这样的东西可以正常工作。
我将 index.html 上传到同一主机。正在使用 href="sprite.svg#test"。这是否适用于 Firefox：s3.amazonaws.com/jagger/svg/index.html
否，因为您的外部 SVG 文件无效（它没有定义命名空间）。如果您直接查看 sprite.svg 文件，您的 UA 会告诉您这一点，类似于“此 XML 文件似乎没有任何与之关联的样式信息。文档树如下所示。”

标签： svg svg-sprite

【解决方案1】：

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

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

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

【讨论】：