问Chrome中的SVGs有时不会呈现

EN

第三版:这是一个有用的测试用例。看起来它与缓存svg spritesheet有关。如果我在服务器上配置缓存控制，使SVG没有缓存，则会发生这种行为。可以随意查看源代码(所有内容都在一个文件中，但我不想在这里全部包含)。

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

第二个编辑:下面列出的修复程序(直接注入index.html中的元素而不是使用外部spritesheet)在Chrome v49 (我的beta频道浏览器刚刚更新到的)中停止工作。v48有断断续续的呈现问题，但是v49始终没有按照<svg><use></use></svg>模式呈现任何引用的内容，而是只在一个大的、复杂的角度页面中呈现。一个无聊的简单测试用例工作得很好。增加了一个赏金，任何人谁可以直接指出我知道的问题，或任何地方，这可能是来自。它肯定不是文件未找到的，因为它仍然是一个间歇性的错误，整个页面在firefox和safari中呈现得很好。

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

我在chrome中有一些奇怪的行为(只是--这在opera、firefox、safari上没有发生过)；我至少从40年代初就已经看到了，就版本而言。

我的行为是处于一个重复的角结构的中间。一切都是一样的-有一堆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使用，它仍然会失败。

编辑: per的请求，这是相关的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>