Chrome中的SVG有时无法渲染 [英] SVGs in Chrome sometimes don't render

问题描述

第三这是一个有效的测试用例.似乎与缓存svg spritesheet有关.如果我在服务器上配置了缓存控制，以便没有SVG的缓存，则会发生此行为.随时查看源代码(所有内容都在一个文件中，但我不想在此处包含所有内容).

THIRD here's a working test case. It looks like it has something to do with caching the svg spritesheet. If I configure cache control on my server so that there's no caching of the SVG, the behavior occurs. Feel free to view source (it's all in the one file, but I don't want to include it all here).

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

第二下面列出的修复程序(直接将index.html中的元素注入而不是使用外部Spritesheet)在Chrome v49(我的Beta频道浏览器刚刚更新到了该版本)中停止了工作. v48存在间歇性渲染问题，但v49始终一致地不会按照<svg><use></use></svg>模式渲染所引用的任何内容；但仅在大而复杂的有角页面中显示.一个无聊的简单测试用例可以正常工作.为任何可以直接将我指向已知问题或可能来自何处的人添加了赏金.可以肯定，它不是文件找不到的，因为它仍然是一个间歇性的错误，并且整个页面在firefox和safari中都可以正常显示.

SECOND The fix listed below (directly injecting the elements in the index.html instead of using an external spritesheet) just stopped working in Chrome v49 (which my beta channel browser just updated to). v48 has the intermittent rendering issue, but v49 pretty consistently doesn't render anything that's referred follows a <svg><use></use></svg> pattern; but only in a big, complicated angular page. A boring simple test case works fine. Added a bounty for anyone who can directly point me at a known issue or wherever this might be coming from. It is most assuredly not file-not-found, as it's still an intermittent bug, and the whole page renders just fine in firefox and safari.

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

this definitely has something to do with referring to an external resource. When I embed the SVGs directly in index.html and refer to them in with <use xlink:href="#id"></use> they work fine, but if I refer to an external file in the <use> element, they only load sometimes.

我在chrome中有一些奇怪的行为(仅-在Opera，firefox，safari上不会发生)；至少从40年代初期开始，我就一直在看它.

I have some weird behavior in chrome (only - this doesn't happen on opera, firefox, safari); I've been seeing it since at least the early 40s, version-wise.

我的行为处于ng重复的角度结构的中间.一切都是一样的-一堆的divs一起装箱了.还有一个SVG元素，看起来像:

My behavior is in the middle of an ng-repeated angular structure. Everything is the same - there's a bunch of divs flexboxed together. There's also an SVG element that looks like:

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

非常简单

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

The thing is, for some of these repeated elements, the icon doesn't render. Inspecting the element in the chrome dev tools indicates that the rendered SVG's <use> element has a height and width, whereas the non-rendered one has a zero height and width.

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

It's not like there's any real difference here; I've even manually edited the DOM to make one of the offending entries match one of the rendered ones completely, but the svg still doesn't render. Here's a relevant screenshot.

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

You can see below (and ignore my padding issues with the button) the first row doesn't have the little heads and word bubble icons. This is an intermittent problem - if I reload the page, it may be fine, or maybe none of the icons will load.

我想知道:是否有一些与使用子画面表相关的晦涩问题(所有表现出此行为的SVG都在同一个大SVG文件中，并由#id引用)以异步方式加载或以其他方式加载?

I'm wondering: is there some kind of obscure issue associated with using sprite sheets (all the SVGs that exhibit this behavior are in the same big SVG file and are referenced by #id) loading asynchronously or something?

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

If this is really unknown / new behavior, I'll work on engineering a test case, but building something that probably relies on some kind of concurrency bug is kind of hard. So I figured I'd ask around first.

要添加的如果我将单个svg导出为独立文件并以<img src="icon.svg">方式使用，则不会发生此行为.如果我在单个独立文件中对图标进行svg使用，它仍然会失败.

EDIT to add: This behavior does not happen if I export the individual svg out as a standalone and use it in an <img src="icon.svg"> fashion. It does still fail if I do an svg use on the icon in a single standalone file.

根据@kaiido的请求，以下是相关的svg.

per @kaiido's request, here is the relevant svg in question.

<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>

推荐答案

好吧，事实证明这毕竟是一个chrome bug，几乎就是我原本的想法:在某些情况下，在中断周围更改<use>元素.这些情况基本上是:当svg Spritesheet没有在浏览器中缓存时.

Well, it turns out this is a chrome bug after all, and pretty much what I had thought it was: changing <use> elements around breaks under certain circumstances. Those circumstances are basically: when the svg spritesheet isn't cached in the browser.

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

固定在金丝雀(M50)中，可能会合并到M49中.

Fixed in canary (M50), might get merged in to M49.

解决方法是在SVG Spritesheet上设置一个大于零的缓存控制标头.这也有助于解释为什么我只在测试服务器上看到此错误，而在生产环境中却没有看到-我的Beta框中有不同的缓存设置.

The workaround is to set a cache-control header on the SVG spritesheet that is more than zero. That also helps explain why I only saw this bug in my testing server and not in production - I have different cache settings on my beta box.

这篇关于Chrome中的SVG有时无法渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！