1.您有此错误：* 不安全的尝试加载URL https：..... svg从帧与URL https：//......域名、协议、端口必须匹配*
1.需要使用要使用的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

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

但是请注意，元素也可以直接显示您的图像（即使您可能会失去您可能从： element could also have displayed your image directly (even though you'll loose the little control you may have from :

<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仍然有一个注解，但它们确实
放宽对特定元素的引用要求，允许删除片段以表示引用根元素，在有意义的地方，例如使用
10年后还没有浏览器实现了这个功能，所以这里的规范是错误的，应该编辑删除这个注解，因为一个特定的行为应该至少有两个实现者才被认为是“标准”。

SVG 2（在浏览器中实现时）将允许引用另一个没有任何fragment identifier的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似乎正在主流浏览器中开发（参见this Chrome feature，特别是Chromium问题：Issue 366545: [SVG2] Allow to reference entire files）。