外部文件中的SVG图标无法在Firefox中呈现

问题描述

我的svg图标在Chrome中可以正常显示，但在Firefox中却不能。对于chrome，use标签与我的外部文件中的相应符号标签连接。 Firefox并非如此。网站通过https呈现。

Chrome中的检查器控制台：

<use href="/static/media/icons.6a99d84f.svg#sun" class="srkBlack" transform="translate(151.00535764116418 69.12489159171793)scale(.4)">
  #shadow-root (closed)
  <svg id="sun" viewBox="0 0 200 200">
  <path style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.4;stroke-opacity:1" d="m 16.136067,15.83614 h 0.09665 v 0.09665 h -0.09665 z m -9.6934884,0.263275 a 9.6572458,9.6572463 0 1 0 19.3144874,0 9.6572458,9.6572463 0 1 0 -19.3144874,0 m 8.6915274,0 a 0.96572559,0.96572565 0 1 0 1.931451,0 0.96572559,0.96572565 0 1 0 -1.931451,0"></path>
</svg>
</use>

Firefox中的检查器控制台：

<use href="/static/media/icons.6a99d84f.svg#sun" class="srkBlack" transform="translate(62.2828608746849 157.56870700757347)scale(.4)">
  #shadow-root (closed)
</use>

css：

.srkBlack {
  fill:black; 
  stroke:black;
}

Icons.svg：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="sun" viewBox="0 0 200 200">
  <path style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.4;stroke-opacity:1"
  d="m 16.136067,0" />
</symbol>
</defs>
</svg>

解决方法

我能够通过http://svg.enshrined.co.uk/发送Icons.svg文件来解决此问题。

Chrome遗漏了一些丢失的标签，但Firefox没有。

缺少结束符号标签。我实际上可以通过检查icons.svg文件找到它们，但是花了一段时间。为了查看是否可以使用在线验证器来加快过程，我采用了另一种方法。这两个结果文件都是相同的。

firefox html svg symbols