Cross domain svg sprite

Question

我知道有很多方法可以在HTML中使用SVG sprites。我更倾向于对这个日期已经使用类似

<div class="container"> 
    <svg class="icon"> 
    <title>Icon Title</title> 
    <use xlink:href="/svg/sprite.svg#icon"/> 
    </svg> 
</div> 

不过，现在我想从一个子域加载精灵，就像这样：

<div class="container"> 
    <svg class="icon"> 
    <title>Icon Title</title> 
    <use xlink:href="https://sub.domain.com/svg/sprite-home.svg#icon"/> 
    </svg> 
</div> 

不幸的是，这并不能作为工作文件未被提取。我也尝试过<object>，但这似乎也不起作用。

到目前为止，我只能够使用

<?php include_once("https://sub.domain.com/svg/sprite.svg"); ?> 

这是确定为速战速决，因为这不涉及太多的重构。但是，这也意味着HTML变得臃肿。

使用<use>方法，精灵将被缓存。但是对于include方法，精灵不会被缓存，只会被嵌入，所以它远非理想。

有没有人使用任何替代PHP的include方法与跨域请求和浏览器缓存兼容？

Answer 1

感谢这篇文章在css-tricks我已经能够解决如何做到这一点。我们的想法是AJAX带来的SVG精灵使用jQuery像这样（见张贴香草版）：

$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来引用图标。

<div class="container"> 
    <svg class="icon"> 
    <title>Icon Title</title> 
    <use xlink:href="#icon"/> 
    </svg> 
</div> 

有许多优势，这种技术：

• SVG精灵缓存
• 真正简单的使用，你只引用的图标
• 您可以要求几个SVG精灵，他们都工作是一样的

唯一要记住的是，这需要CORS AJAX被设置。对于那些使用nginx的人来说，它会很简单：

location ~* \.svg$ { 
    ... 
    add_header 'Access-Control-Allow-Methods' 'GET'; 
    add_header 'Access-Control-Allow-Origin' 'https://your.domain.com'; 
}