SVG 不显示在 Firefox 上答案

【问题标题】：SVGs don't show on FirefoxSVG 不显示在 Firefox 上
【发布时间】：2020-07-31 21:43:10
【问题描述】：

我在我的网站上使用了一堆 SVG。它们只在 Chrome 上显示 find，但在 Firefox 上根本不显示。

我一直在尝试查找这方面的信息，但令人惊讶的是没有那么多。我发现的所有内容都在谈论定义 SVG 的大小，我已经尝试这样做并在任何地方定义大小，但它不起作用，或者我做错了。

这是我正在使用的精灵：

<symbol id="heart"  width="24px" height="24px" viewBox="0 0 24 24">
<title>heart</title>
<path d="M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z"/>
</symbol>

这就是我将它放置在我的组件中的方式：

<svg className="room__favorite-heart room__favorite-heart--empty">
    <use xlinkHref="../sprite.svg#heart"></use>
</svg>

这是我的 CSS：

.room {
  &__favorite-heart {
    height: 1.5rem;
    width: 1.5rem;
    &--full {
      fill: $mainColor;
    }
    &--empty {
      fill: $greyLightest;
    }
  }
}

还有

.icon-testing{
  width: 24px;
  height: 24px;
}

【问题讨论】：

这不是有效的 CSS。它是被什么东西编译的吗？
我在我的一个 React 应用程序中使用 SVG，它们在 Chrome 和 Firefox 上显示得很好，所以它一定是你代码中的其他东西
@evolutionxbox 是 scss
@HermitCrab 我已经把所有相关的代码都放在这里了，不知道还能是什么
Firefox 不支持带 SVG 的 rem 单位。

标签： javascript reactjs firefox svg graphics

【解决方案1】：

我不在您的环境中编写代码，所以我只关注 SVG，这里有一些我发现的东西：

你的路径应该在<g> <\g>标签内

我知道它是可选的，但可能只是 Firefox 解码器期待它（只是猜测）。所以就试试吧……

我在您的 SVG 中没有看到 stroke/fill 设置

这很可能是问题所在。这里的 SVG 有这样的设置：

<svg width="512" height="512" viewBox="3.621934 13.621934 90.255485 62.818094" fill="none" stroke="none" stroke-width="1px" transform="matrix(1 0 0 1 0 0" >
 <g stroke="blue">
  <path id=" " stroke="magenta" d="M 10 70 a 133.591805 50 12.97728 0 0 70 -50 "/>
  <path id=" " stroke="red"     d="M10.000000 70.000000 C24.500960 70.325512 38.696601 69.272793 49.846109 67.045096 C60.995616 64.817400 70.632828 61.108261 76.897046 56.633820 C83.161264 52.159379 86.914255 46.304086 87.431414 40.198450 C87.948573 34.092813 85.301045 26.896880 80.000000 20.000000 "/>
 </g>
</svg>

【讨论】：