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

Question

从<use>标签加载 SVG 时无法正确显示。我添加了一个 img 标签来说明预期的结果。

代码示例：

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

电流输出：

工作小提琴： 演示

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

Answer 1

该<use>元素确实复制您从属性链接到的元素href。不能file.svg直接指向a，需要指向id元素的of。

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

<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'
  )
);

但请注意， <image> 元素也可以直接显示您的图像（即使您会失去 <use> 中可能拥有的一点控制权：

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

请注意，虽然SVG2仍然有一个注释，表明它们确实

放宽对特定元素的引用要求，以允许删除片段来表示引用根元素（在有意义的情况下），例如使用

10 年后没有浏览器实现了这一点，因此这里的规范是错误的，应该进行编辑以删除此注释，因为特定行为应该至少有两个实现者被视为“标准”。

Answer 2

1. 您遇到此错误：Unsafe尝试从具有 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

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>

之后（无需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] 允许引用整个文件）。