SVG< use xlink:href>从CDN [英] SVG <use xlink:href> from a CDN

问题描述

我正在使用< use xlink:href> 引用我的 svg 文件.
它在我的本地计算机上运行良好，但是当我从CDN引用它时抛出错误(CORS).看来 xlink:href 不允许 CORS 请求，但我想知道是否有解决方案?

I am using the <use xlink:href> to reference my svg file.
It works fine on my local but throws an error (CORS) when I reference it from a CDN. It looks as though the xlink:href doesn't allow the CORS request but I am wondering if there is any solution?

另一方面，我听说 SVG2 不赞成使用这种sprite技术.那么，目前使用sprite SVG文件的最佳解决方案是什么，它可以在包括移动浏览器在内的所有不同浏览器上使用.

On the other hand, I have heard that this sprite technique is deprecated on SVG2. So what is the best solution to use sprite SVG file for now that works on all different browsers including mobile browsers.

推荐答案

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

The simplest cross-browser solution I've found is to fetch the SVG sprite via ajax and embed it in your page:

<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>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#heart"></use>
</svg>

这篇关于SVG< use xlink:href>从CDN的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！