Chrome中的SVG有时无法渲染

Question

第三次编辑:这是一个工作测试用例.看起来它与缓存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年代早期,我一直在看它,版本明智.

我的行为是在重复的角度结构中间.一切都是一样的 - 有一堆divs一起使用.还有一个SVG元素,如下所示:

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

非常简单.

问题是,对于这些重复元素中的一些,图标不会呈现.检查chrome dev工具中的<use>元素表示渲染的SVG 元素具有高度和宽度,而未渲染的元素具有零高度和宽度.

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

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

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

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

编辑添加:如果我将单个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上设置一个大于零的缓存控制头.这也有助于解释为什么我只在我的测试服务器中看到这个错误而不是在生产中 - 我在我的测试版盒子上有不同的缓存设置.

Answer 2

xlink:href自SVG 2(证明链接)以来,不推荐使用属性.Chrome的新版本使用此属性很奇怪.

如果你使用xlink:href(对于古老的浏览器)和href(对于新的浏览器)一切都可以在任何地方正常工作.