SVG 符号未在 Chrome 中加载 AJAX 内容答案

【问题标题】：SVG Symbols not loading with AJAX content in ChromeSVG 符号未在 Chrome 中加载 AJAX 内容
【发布时间】：2017-10-29 21:54:31
【问题描述】：

我可以让 SVG 正常加载…… 但是当通过 AJAX 加载内容时，它们会加载空白。

这在 Chrome 中专门发生在我身上（在 macOS 上测试）。 Firefox 和 Safari 工作正常（在 macOS 上测试）。

我认为这可能与文件引用有关，尽管我已将根用于 SVG 文件引用（“/”）。

如何解决此问题，以便通过 AJAX 加载的 SVG 可以在 Chrome 中工作？

这是一个测试用例：

https://jaygeorge.co.uk/sandbox/infinite-scroll-with-ajax-and-icons/

当您登陆页面时，请滚动以触发无限滚动，其中会加载更多项目。您会看到图标没有正确加载。

附：我想在这里或 CodePen 等上包含一个代码 sn-p，但需要获取另一个文件的内容，所以我无法让它通过这些系统工作。

【问题讨论】：

请创建一个minimal reproducible example。如果您最终修复了您的外部网站，这个问题将不再对未来的访问者有用。
关注这个答案，来自用户 user87312：stackoverflow.com/a/30947301/4102927
这是一个错误... 丑陋 --workaround--（这让我知道这是一个错误）：document.querySelectorAll('use').forEach(u=>u.replaceWith(u.cloneNode()))（需要在每个滚动显示时完成）。如果您可以共享用于生成这些 SVG 的代码，则可以更清楚地隔离错误在哪里，并找到更好的解决方法。
感谢@Melendez 的建议，但这对我不起作用。我没有使用图像标签，而是使用 svg 标签，所以也许这就是它没有帮助的原因。
感谢@Kaiido，我正在努力隔离代码，并在完成后更新。顺便说一句，SVG是通过Icomoon生成的。

标签： javascript jquery ajax google-chrome svg

【解决方案1】：

我通过将 xlink 定义添加到 symbol-devs.svg 来解决此问题。

symbol-defs.svg 文件是由https://icomoon.io 生成的，所以我已要求创建者更新应用程序并进行修复。

这是原版…… <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg">

这是固定版本... <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

更新： Icomoon 现已更新，因此应用程序中不应再出现此问题。

【讨论】：

【解决方案2】：

在 Chrome 中对我有用的是更新它以使用绝对 URL 而不是相对 URL：

<svg><use xlink:href="/images/icons.svg#home"></use></svg>

变成

<svg><use xlink:href="https://www.example.com/images/icons.svg#home"></use></svg>

希望这会有所帮助！

【讨论】：