Question

我使用<use xlink:href>来引用我的svg文件它在我的本地工作正常，但当我从CDN引用它时抛出错误（CORS）。好像xlink:href似乎不允许 CORS 请求，但我想知道是否有任何解决方案？

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

Answer 1

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

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

来自CDN的SVG <use xink：href =“”>

1 个答案: