Javascript SVG路径未在Safari中显示

我有一个SVG图标文件，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path id="instagram" d="..."/>
  <path id="linkedin" d="..."/>
  <path id="twitter" d="..."/>
</svg>

  <a href="...">
    <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#instagram"></svg>
  </a>
  <a href="...">
    <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#linkedin"></svg>
  </a>
  <a href="...">
    <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#twitter"></svg>
  </a>

它在我的HTML中引用如下：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path id="instagram" d="..."/>
  <path id="linkedin" d="..."/>
  <path id="twitter" d="..."/>
</svg>

  <a href="...">
    <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#instagram"></svg>
  </a>
  <a href="...">
    <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#linkedin"></svg>
  </a>
  <a href="...">
    <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#twitter"></svg>
  </a>

而且，SVG不会在桌面或移动设备上的Safari中渲染

有没有一种方法可以让它们使用在所有浏览器中都有效的

标记进行渲染？如果可能的话，我不想编辑设置

标签样式的CSS。

标签是唯一可以跨所有浏览器工作的解决方案吗？引用路径的

id

是否对

标记也有效

---

谢谢

我认为safari不支持

元素的外部内容。