Chrome中的SVG有时无法呈现

Question

第三次编辑：这是一个有效的测试案例。看起来它与缓存svg spritesheet有关。如果我在我的服务器上配置缓存控制，以便没有缓存SVG，则会发生此行为。随意查看来源（它只是在一个文件中，但我不想在这里全部包含它）。

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

第二次编辑：下面列出的修补程序（直接在index.html中注入元素而不是使用外部spritesheet）刚刚停止在Chrome v49（我的测试版频道浏览器刚更新到）中工作。 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 dev工具中的元素表示渲染的SVG <use>元素具有高度和宽度，而未渲染的元素具有零高度和宽度。

它不像这里有任何真正的区别;我甚至手动编辑了DOM，使其中一个违规条目完全匹配其中一个，但是svg仍然没有渲染。这是相关的屏幕截图。

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

我想知道：是否存在与使用精灵表相关的某种模糊问题（所有表现出此行为的SVG都在同一个大SVG文件中并被#id引用）异步加载或什么？< / p>

如果这是真正未知的/新行为，我将设计一个测试用例，但构建一些可能依赖于某种并发错误的东西是很难的。所以我想我先问一下。

编辑添加：如果我将单个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

嗯，事实证明这毕竟是一个铬虫，而且几乎就是我认为的那样：在某些情况下改变<use>元素。这些情况基本上是：当svg spritesheet没有在浏览器中缓存时。

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

在金丝雀（M50）中修复，可能会合并到M49。

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

Answer 2

自SVG 2（proof link）以来，不推荐使用属性git rebase --onto A C E 。 Chrome的新版本使用此属性很奇怪。

如果您使用xlink:href（适用于古代浏览器）和xlink:href（适用于新浏览器） 一切都会好起来的。

Answer 3

我也有这个错误。通过缓存＆amp; amp;和pfooti解决方案固定然后通过webkit更新。

但后来它回来了：不是同样的事情，但后来可能对其他人有用。

我用Inkscape打开了我的SVG（但在Illustrator中也是如此），选择了我的对象并应用了"AAB3"＆gt; path，已保存：

union

成了

<path class="st0" d="M32 272l128 48 16 160 80-112 112 112L480 32 32 272zm318.7 145.4L256 320l128-176-192 153.8-82.6-31 322-172.5-80.7 323.1z"/>

现在它有效！

我不确切知道原因，但Chrome似乎对第一种语法有一些问题。 希望它有所帮助！