google-chrome - Chrome 中的 SVG 有时不渲染

Question

第三次编辑:这是一个有效的测试用例。看起来它与缓存 svg spritesheet 有关。如果我在服务器上配置缓存控制，以便不缓存 SVG，则会发生该行为。请随意查看源代码(所有内容都在一个文件中，但我不想将其全部包含在此处)。

https://stuff.spherical.fish/svgtest.html

第二次编辑:下面列出的修复程序(直接在index.html中注入(inject)元素而不是使用外部spritesheet)在Chrome v49(我的测试版 channel 浏览器刚刚更新到)中停止工作。 v48 存在间歇性渲染问题，但 v49 几乎始终不渲染 <svg><use></use></svg> 后面引用的任何内容。图案;但仅限于大而复杂的角度页面。一个无聊的简单测试用例就可以正常工作。为任何可以直接向我指出已知问题或问题可能来自何处的人添加了赏金。它肯定不是文件未找到，因为它仍然是一个间歇性错误，整个页面在 Firefox 和 Safari 中渲染得很好。

编辑:这肯定与引用外部资源有关。当我将 SVG 直接嵌入到 index.html 并使用 <use xlink:href="#id"></use> 引用它们时它们工作正常，但如果我引用 <use> 中的外部文件元素，它们仅有时加载。

我在 chrome 中有一些奇怪的行为(只是 - 这不会发生在 opera、firefox、safari 上)；至少从 40 年代初开始，我就开始看到它的版本了。

我的行为处于 ng-repeated 角度结构的中间。一切都是一样的——有一堆 div 被弹性盒装在一起。还有一个 SVG 元素，如下所示:

<svg class="icon-3">
  <use xlink:href="/assets/trellis-icons.svg#icon-users"></use>
</svg>

非常简单。

问题是，对于这些重复元素中的某些，图标不会呈现。检查 chrome 开发工具中的元素表明渲染的 SVG 的 <use>元素具有高度和宽度，而未渲染元素的高度和宽度为零。

这里并没有什么真正的区别；我什至手动编辑了 DOM，使有问题的条目之一与渲染的条目之一完全匹配，但 svg 仍然无法渲染。这是相关的屏幕截图。

您可以在下面看到(并忽略我的按钮填充问题)第一行没有小头和文字气泡图标。这是一个间歇性问题 - 如果我重新加载页面，可能会没事，或者可能不会加载任何图标。

我想知道:是否存在与使用 Sprite 表(表现出此行为的所有 SVG 都在同一个大 SVG 文件中并由 #id 引用)异步加载或其他内容相关的某种模糊问题？

如果这确实是未知/新行为，我将致力于设计一个测试用例，但是构建可能依赖于某种并发错误的东西有点困难。所以我想我应该先打听一下。

编辑添加:如果我将单个 svg 作为独立导出并在 <img src="icon.svg"> 中使用它，则不会发生此行为。时尚。如果我在单个独立文件中的图标上使用 svg，它仍然会失败。

编辑:根据@kaiido的请求，这里是相关的svg。

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- thirty other symbols snipped -->
  <symbol id="icon-users" viewBox="0 0 512 512">
    <path d="m352 397c-15-16-78-32-109-48c-21-11-32-33-32-53c0-10 7-19 13-26c5-6 9-14 13-24c8-4 18-12 18-31c0-12-2-19-5-24c1-11 2-22 3-34c4-45-42-90-89-90c-47 0-92 45-88 90c1 12 2 23 3 34c-4 5-5 12-5 24c0 19 9 27 18 31c4 10 8 18 13 24c6 7 13 16 13 26c0 20-11 42-32 53c-18 9-48 19-72 28l0 68l354 0c0 0 0-32-16-48z m146-7c-21-8-46-16-62-24c-17-8-25-27-25-43c0-8 5-15 10-21c4-5 8-12 11-20c7-3 15-10 15-25c0-10-2-16-5-20c1-9 2-18 3-27c3-37-34-76-73-76c-38 0-75 39-72 76c1 9 2 18 3 27c-3 4-5 10-5 20c0 16 8 22 15 25c3 8 7 15 11 20c4 6 10 13 10 21c0 10-4 22-11 31c30 11 43 22 53 33c19 19 19 58 19 58l103 0z"/>
  </symbol>
</svg>

Answer 1

好吧，事实证明这毕竟是一个 chrome bug，而且和我想象的差不多:改变 <use>在某些情况下围绕中断的元素。这些情况基本上是:当 svg spritesheet 未缓存在浏览器中时。

https://code.google.com/p/chromium/issues/detail?id=580809

已在 Canary (M50) 中修复，可能会合并到 M49。

解决方法是在 SVG spritesheet 上设置一个大于零的缓存控制 header 。这也有助于解释为什么我只在我的测试服务器中而不是在生产中看到这个错误 - 我的测试盒上有不同的缓存设置。