html 精灵图标,html – 跨域svg精灵

感谢这篇文章在

css-tricks,我已经能够找到如何做到这一点.我的想法是让AJAX像这样使用jQuery带来SVG sprite(参见vanilla版本的帖子)：

$j.get("https://sub.domain.com/svg/sprite-home.svg",function(data) {

var div = document.createElement("div");

div.className = 'no-display';

div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);

document.body.insertBefore(div,document.body.childNodes[0]);

});

这样做是在文档的开头插入SVG.与原始帖子不同,我添加了一个类来隐藏它,否则你会在Chrome顶部获得一个空白的大空间.结果很棒(它也可以与本地文件一起使用),现在您可以通过ID来引用图标.

Icon Title

这种技术有很多优点：

> SVG精灵被缓存

>真的很简单,因为你只参考图标

>您可以请求多个SVG精灵,它们的工作方式相同

唯一要记住的是,这需要建立CORS AJAX.对于那些使用nginx的人来说,这很简单：

location ~* \.svg${

...

add_header 'Access-Control-Allow-Methods' 'GET';

add_header 'Access-Control-Allow-Origin' 'https://your.domain.com';

}