如何通过 <use> 标签使用整个 SVG？

Question

我有一个从 Figma 新鲜导出的 SVG 文件。

1. 我不想内联它，因为它在多个地方使用。
2. 我无法指定它，<img src="...">因为我需要对其部分进行样式设置。

所以，我尝试像这样包含它：

<svg>
  <use xlink:href="http://example.com/myshape.svg"></use>
</svg>

但这不起作用。MDN指出：

该<use>元素从 SVG 文档中获取节点，并将它们复制到其他位置。

它从文档中获取节点。使用 SVG 精灵，您可以拥有带有属性的<symbol>标签，并通过添加. 然而，这里我需要使用整个文档，即IE的根节点。有没有办法做到这一点？id<use>xlink:href="mysprite.svg#symbolid"

如果我不必编辑源 SVG 文件，那就太好了，因为它是由用户通过管理面板上传的。它只是从任何矢量图形程序导出的文件。

Answer 1

目前（截至 2023/11）您需要将 #id 添加到目标 SVG 的根并将其引用为“片段标识符”：

<!-- my-vector.svg -->
<svg id="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <circle r="10" cx="12" cy="12" />
</svg>

<use href="my-vector.svg#icon"></use>

SVG 2（在浏览器中实现时）将允许引用另一个不带任何片段标识符的SVG 文件：

SVG 2 中的新增功能：href不带片段允许引用整个 SVG 文档，而无需确保其根元素上有 ID。

未来（不需要id="..."在 上定义svg）：

<!-- my-vector.svg -->

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <circle r="10" cx="12" cy="12" />
</svg>

<use href="my-vector.svg"></use>

SVG 2 似乎正在主要浏览器中进行开发（请参阅此 Chrome 功能，特别是此 Chromium 问题：问题 366545：[SVG2] 允许引用整个文件）。