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

Posted 2023-03-06

【中文标题】使用 xlink 的 SVG 在 Firefox 84 中不起作用

【英文标题】：SVGs with use xlink not working in Firefox 84

【发布时间】：2021-04-24 03:25:28

【问题描述】：

我遇到了一个问题，我有几个 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 (https://***.com/a/38124867/2910611) 确保 path 的 d 属性中没有逗号 使用 fill="currentColor" 看看是不是填充问题 使用 href 代替 xlink:href

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

我从caniuse that Firefox supports use xlink:href看到。

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

【问题讨论】：

是的，它是一个网络服务器。即使部署也不起作用。 Sprites.svg 位于根目录下，我已确认获取它的请求返回 200。

我已经发现了这个问题。在 sprites 文件中，其中一个符号没有结束标记。由于某种原因，其他浏览器仍然能够显示所有这些，但不是 FF，所以我直到现在才注意到这个问题！

【参考方案1】：

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

由于可能发生在其他人身上，我会继续发布问题。

【讨论】：

浏览器不应使用无效的 XML，但它们也会进行增量渲染，因此在大型精灵表中，它们在使用图标之前可能没有发现语法错误。

@RobertLongson 令人惊讶的是它甚至不是最后一个符号，因此 Chromium 能够显示最后一个符号，即使一路上存在语法错误，而 FF 根本没有t 显示任何

那么这似乎是一个 Chrome 错误，因为据我所知，这不是有效的行为。