SVG 无法在 Chrome 84 中的初始页面加载时呈现

Question

2020 年 7 月 28 日更新：Chromium 项目正在讨论这个问题：https : //bugs.chromium.org/p/chromium/issues/detail? id = 1107442 & q = svg & can =2。该问题已在 M86 canary 中得到解决，并且可能也会合并到 M85 中（84 可能仍然损坏）。

来自https://support.google.com/chrome/thread/60499004?hl=en 的交叉帖子

从 Chrome 84 开始，如果 SVG sprite 文件不是从本地磁盘缓存提供的，我会注意到渲染图标的问题。我能够使用以下示例代码可靠地重现（假设在 DevTools 中禁用缓存和/或使用强制刷新）：

    <svg>
        <use xlink:href="/path/to/sprites.svg#icon-name"></use>
    </svg>

...其中sprites.svg是应用服务器上的静态文件，icon-name是<symbol>该文件中a的id 。包含上述代码的页面无法在第一次加载页面时呈现图标（即文件尚未缓存）。我已经按照潜在相关线程的建议添加了一个大于 0 的服务器端 Cache-Control 标头。这似乎解决了 HTTPS 环境中的这个问题，但 SVG 在 HTTP 环境中的非缓存加载时仍然失败。

将引用转换为内联 SVG 确实解决了 HTTP 和 HTTPS 环境中的问题，但这种方法失去了以 sprite 形式缓存整个图标集以便跨应用程序使用的优势。该问题首先出现在从 83 升级到 Chrome 84 之后，没有相关的代码更改。

Answer 1

这是Chrome M84 中的一个已知问题，最迟将在 M85 中修补（目前目标是在 8 月 22 日稳定发布）。正如链接的 Chromium 论坛帖子中所建议的，以下解决方案可以作为一种解决方法，直到修复程序作为 M84 修补程序或在 M85 中可用：

document.querySelectorAll('svg').forEach(x => {x.innerHTML = x.innerHTML});