【发布时间】：2016-05-05 03:23:22
【问题描述】：
第三次编辑：这是一个有效的测试用例。看起来它与缓存 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 年代初就已经看到它了，就版本而言。
我的行为处于 ng 重复角结构的中间。一切都是一样的——有一堆 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>
【问题讨论】：
-
控制台中是否有任何错误或类似情况？像这样的错误存在一段时间，修复是使用 而不是 。尝试弄乱绝对 URI 和标签格式，不过似乎是一个非常奇怪的错误。也许提交一张票？您也是在本地机器上还是在远程服务器上进行测试，它是否存在于 firefox / IE 中？
-
控制台上没有错误，我正在使用 。在 localhost 和远程服务器上进行测试，错误只发生在 chrome: ff 和 safari 中（不在 IE/edge/opera 上测试）。感觉有点像并发错误 - 它通常只是列表中的第一个项目会呈现哪些不呈现，就像如果您尝试使用未加载但您什么也得不到的 svg。我会尝试使用绝对 URI。
-
小更新 - 绝对 URL 没有帮助，也没有删除我的 svg sprite 列表中的所有内容。 （我最初只是为开发工作导入了一个大的 ol' 文件，但实际上只使用了其中 10% 的符号）。仍然断断续续（在 Angular 应用程序中以一种导致 DOM 树发生变异的方式单击会导致图标突然呈现）。
-
该问题与 Angular 无关。我们这边也有完全相同的问题（该站点不是 SPA）。很多 svg 图标（~190...是的）和相同的随机性
-
@AliF50 它必须在服务器上完成，为 nginx 或 apache 或任何你服务的配置设置。
标签： google-chrome svg