如何使用带有 <use> 标签的整个SVG？

Question

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

1. 我不想将它嵌入到页面中因为它被多处使用。
2. 我不能将它指定为<img src="...">因为我需要样式化其中的部分。

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

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

但它无法正常工作。MDN说明：

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

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

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

- dodov

---

给根节点一个ID，并将用户指向该ID。 - Robert Longson

那个有点可行。但是上传的SVG文件必须进行编辑，我需要在我的标记中指定viewBox属性，而且我不知道该值应该是什么，因为它是由用户上传的文件。这是唯一的方法吗？ - dodov

Answer 1

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

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

改变前：

<!-- 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上就不需要再定义id="..."）：

<!-- 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问题：Issue 366545：[SVG2] 允许引用整个文件夹）。

- Mahozad