html - 如何使用带有 标签的整个 SVG？

Question

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

1. 我不想内联它，因为它在多个地方使用。
2. 我不能将其指定为 <img src="...">因为我需要设计它的各个部分。

所以，我试着像这样包含它:

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

但它不起作用。 MDN states :

The <use> element takes nodes from within the SVG document, and duplicates them somewhere else.

它从文档中获取节点。使用 SVG Sprite ，您有 <symbol>带有 id 的标签属性并用 <use> 引用它们通过添加 xlink:href="mysprite.svg#symbolid" .但是，在这里我需要使用整个文档，即 I.E.根节点。有办法吗？

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

Answer 1

SVG 2 (在浏览器中实现时)将允许在没有任何 fragment identifier 的情况下引用另一个 SVG 文件:

New in SVG 2: An href without a fragment allows an entire SVG document to be referenced without having to ensure that it has an ID on its root element.

之前:

<!-- 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 似乎正处于主要浏览器的开发过程中(参见 this Chrome feature，特别是这个 Chromium 问题:Issue 366545: [SVG2] Allow to reference entire files)。