为什么 SVG 中的 <use> 元素不起作用？

Question

我有以下简单示例。它存储在 image.svg 中：

 <svg>
  <defs>
    <g id="shape">
      <circle cx="100" cy="100" r="100" />
    </g>
  </defs>
</svg>

但是，将此代码放入 HTML 文件中不会加载任何内容。这是为什么？

 <svg>
  <use xlink:href="#shape" x="10" y="10" />
</svg>

我究竟做错了什么？我似乎无法让它发挥作用。

原文由 BarbuDorel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要在 SVG 中使用您想要使用的形状的 use-tag：

 <svg>
    <defs>
        <g id="shape">
            <circle cx="100" cy="100" r="100" />
        </g>
    </defs>

    <use xlink:href="#shape" x="10" y="10" />
</svg>

原文由 razemauze 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您正在使用来自另一个文档的元素，则必须指定该文档！

 <use xlink:href="#shape" x="10" y="10" />

这意味着“使用当前文档中的 #shape 元素”。

要从另一个文档导入，您需要将对 SVG 文件的引用放在 xlink:href 属性中：

 <use xlink:href="image.svg#shape" x="10" y="10" />

显然你需要在这里检查路径是否正确。请注意，尽管 polyfill 可用，但任何版本的 Internet Explorer 都不支持此功能。

原文由 lonesomeday 发布，翻译遵循 CC BY-SA 3.0 许可协议