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

我有以下简单的例子。它存储在图像.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>

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

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

<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 均不支持此功能。