如何使用<use>标签和href或xlink:href属性显示外部SVG？

Question

当SVG从<use>元素加载时，它的显示可能会出现问题。为了说明预期的结果，我在其后添加了一个<img>元素：

<svg>
  <use xlink:href="file.svg" href="file.svg"></use>
</svg>
<img src="file.svg" />

当前输出：

可运行的示例： 演示

感谢任何能指出我的错误的人。

- seb

Answer 1

1. 您遇到了这个错误：尝试从URL为https://......的框架中加载URL为https:.....svg的不安全尝试域、协议和端口必须匹配

2. 您需要使用要使用的SVG对象的ID

  <svg viewBox="0 0 14 16" width="50">
    <use xlink:href="sof.svg#id" fill="red"/>
  </svg>

请看这个例子：https://codepen.io/enxaneta/project/editor/91143c063e6b9abf1b5c43a14a9937ea

- enxaneta

Answer 2

<use>元素确实会复制您从href属性链接到的元素。您不能直接指向一个file.svg文件，而是需要指向一个元素的id。

<use xlink:href="path/to-the-file.svg#the-element"/>

// since we can't store file in StackSnippets we'll download it first
fetch('https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg')
.then(r => r.blob())
.then(b =>
  // and create a blobURI, with the id of a <g> Element
  use.setAttributeNS(
    'http://www.w3.org/1999/xlink', 'href',
    URL.createObjectURL(b) + '#g4'
  )
);

<svg width="200" height="200" viewBox="0 0 900 900">
  <use id="use"/>
</svg>

但请注意，元素也可以直接显示您的图像（尽管您可能会失去从中获得的一些控制权）：

<svg width="200" height="200" viewBox="0 0 200 200">
  <image width="200" height="200" xlink:href="https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg"/>
</svg>

请注意，尽管SVG2仍然有一个注释说明它们可以放松对特定元素的引用要求，以允许删除片段来表示根元素的引用（在适当的情况下，比如使用use元素），但是在10年后没有任何浏览器实现了这个功能，因此规范在这一点上是错误的，应该被编辑以删除这个注释，因为一个特定的行为至少需要两个实现者才能被认为是“标准”。

- Kaiido

Answer 3

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 问题：问题 366545：允许引用整个文件）。

- Mahozad