时间戳

首页 > 解决方案 > 外部文件中的 SVG 图标未在 Firefox 中呈现

html - 外部文件中的 SVG 图标未在 Firefox 中呈现

问题描述

我的 svg 图标在 Chrome 中渲染得很好，但在 Firefox 中却不行。在 chrome 的情况下，使用标签与我的外部文件中的相应符号标签连接。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;
}

图标.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,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" />
</symbol>
</defs>
</svg>

标签： htmlfirefoxsvgsymbols

解决方案

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

推荐阅读