显示带有<use>标签和href或xlink：href属性的外部SVG？

Question

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

代码示例：

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

当前输出：

工作中的小提琴： demo

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

Answer 1

<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>

Answer 2

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