如何获取 svg 符号以引用外部文件中的另一个符号？

Question

我试图在外部文件的符号中引用符号，但无法在 Chrome 或 Firefox 中使用。

我可以在另一个符号中引用一个符号，如果它们定义在 html 文件的顶部，没问题：

<!-- in the html file -->
<svg width="0" height="0">

  <symbol id="local-circle" viewBox="0 0 100 100" overflow="visible">
    <circle
      cx="50"
      cy="50"
      r="50"
      fill="red"
    />
  </symbol>

  <symbol id="local-sym" viewBox="0 0 100 100" overflow="visible">
    <rect
      x="0"
      y="0"
      width="100"
      height="100"
      fill="blue"
    />
    <use
      xlink:href="#local-circle"
      x="0"
      y="0"
      width="100"
      height="100"
    />
  </symbol>
</svg>

但是当我尝试将此代码放入外部文件时，符号内的符号不显示。

<!-- in an external file called test.svg -->
<svg xmlns="http://www.w3.org/2000/svg">

  <!-- This shows up fine in the html file -->
  <symbol id="ext-circle" viewBox="0 0 100 100" overflow="visible">
    <circle
      cx="50"
      cy="50"
      r="50"
      fill="red"
    />
  </symbol>

  <!-- But here, the rect shows up, but not the referenced circle -->
  <symbol id="ext-sym" viewBox="0 0 100 100" overflow="visible">
    <rect
      x="0"
      y="0"
      width="100"
      height="100"
      fill="blue"
    />
    <use
      xlink:href="#ext-circle"
      x="0"
      y="0"
      width="100"
      height="100"
    />
  </symbol>
</svg>

我什至尝试了文件内符号引用外部符号的组合，但没有成功：

<!-- in the html file -->
<svg width="0" height="0">

  <symbol id="combo-sym" viewBox="0 0 100 100" overflow="visible">
    <rect
      x="0"
      y="0"
      width="100"
      height="100"
      fill="blue"
    />
    <use
      xlink:href="test.svg#ext-circle"
      x="0"
      y="0"
      width="100"
      height="100"
    />
  </symbol>
</svg>

知道我如何才能完成这项工作吗？我会有很多符号，我不想在 html 文件中定义它们。

Answer 1

外部 svg 无效，因为它缺少 xlink 命名空间定义，即 xmlns:xlink="http://www.w3.org/1999/xlink"。一旦我修复了圆圈在 Firefox 中显示正常的问题。

<svg>
    <use
      xlink:href="test.svg#ext-sym"
      x="0"
      y="0"
      width="100"
      height="100"
    />
</svg>

如何获取 svg 符号以引用外部文件中的另一个符号？

How can I get an svg symbol to reference another symbol in an external file?

svg

symbols

xlink