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 =＆＃34; 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符号以引用外部文件中的另一个符号？

1 个答案: