来自 CDN 的 SVG <use xlink:href>

【问题标题】：SVG <use xlink:href> from a CDN来自 CDN 的 SVG <use xlink:href>
【发布时间】：2017-01-29 17:47:47
【问题描述】：

我正在使用<use xlink:href> 来引用我的svg 文件。
它在我的本地运行良好，但当我从 CDN 引用它时会引发错误 (CORS)。看起来xlink:href 似乎不允许 CORS 请求，但我想知道是否有任何解决方案？

另一方面，我听说这种精灵技术在 SVG2 上已被弃用。那么，目前使用 sprite SVG 文件的最佳解决方案是什么，它适用于所有不同的浏览器，包括移动浏览器。

【问题讨论】：

@Chenmunka 请不要建议编辑删除标签。这需要至少三个人来审核，而具有 >2k rep 的人可以单独进行这些编辑。我们感谢您愿意合作，但很遗憾这不是正确的方式。

标签： svg cdn xlink svg-sprite

【解决方案1】：

我发现的最简单的跨浏览器解决方案是通过 ajax 获取 SVG sprite 并将其嵌入到您的页面中：

<div id="svg-container" style="display: none"></div>
<script>
!function() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", '/path/to/cdn/sprite.svg');
    xhr.onload = function() {
        document.getElementById('svg-container').innerHTML = xhr.responseText;
    }
    xhr.send();
}();
</script>

这也使您无需在 xlink:href 中指定 SVG 精灵的 URL

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#heart"></use>
</svg>

【讨论】：

我不确定这是否会被缓存，因为这种技术也可以通过使用xlink:href="path/to/file#heart 来实现。谢谢你的帮助！我不敢相信我在 3 年前问过这个问题：））我不确定这是否仍然有效！非常感谢