使用 xlink 的 SVG 在 Firefox 84 中不起作用

Question

我遇到了一些 SVG 未在 Firefox 中显示的问题。它们在 Chromium 和 Safari 中运行良好。

HTML

<svg
  class="something">
  <use xlink:href="sprite.svg#home" />
</svg>

CSS

.something {
    width: 2rem;
    height: 2rem;
    fill: black;
    cursor: pointer;
}

Sprite.svg

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="home" viewBox="0 0 32 32">
<path d="M28 17.333v13.333h-8v-8h-8v8h-8v-13.333h-4l16-16 16 16h-4zM26.667 9.457v-6.791h-4v2.791l4 4z"></path>
</symbol>
...
</defs>
</svg>

使用开发人员工具检查后，我可以看到 Chrome 的路径：

但不适用于 Firefox：

我已经根据其他帖子尝试过：

确保声明了 xmlns 以及宽度和高度
添加填充继承到 svg 使用 svg ()
确保路径的 d 属性中没有逗号
尝试使用 fill="currentColor" 看看它是否是 fill 的问题
使用 href 代替 xlink:href

知道如何解决这个问题吗？

我从caniuse that Firefox supports use xlink:href.

看到

这似乎是渲染问题而不是填充问题，因为更改图标的大小不会导致可见的变化。

Answer 1

发现问题：精灵文件中的一个符号没有结束标记。出于某种原因，其他浏览器仍然能够毫无抱怨地显示所有这些内容，但 Firefox 不行。

由于其他人可能会遇到这种情况，所以我会保留问题。

使用 xlink 的 SVG 在 Firefox 84 中不起作用

SVGs with use xlink not working in Firefox 84

svg

firefox

cross-browser