跨域 svg 精灵

Question

我知道有很多方法可以在 HTML 中使用 SVG 精灵。我对这个日期的偏好是使用类似

<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 sprite 被缓存
• 使用非常简单，因为您只引用图标
• 您可以请求多个 SVG 精灵，它们的工作原理都是一样的

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

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