html - 跨域 svg Sprite

Question

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

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

但是，现在我想从子域加载 Sprite ，如下所示:

<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> Sprite 被缓存的方法。但是有了 include Sprite 不被缓存的方法，只被嵌入，所以它远非理想。

是否有人使用与跨域请求和浏览器缓存兼容的 php include 方法的替代方法？

Answer 1

感谢这篇文章 css-tricks我已经能够弄清楚如何做到这一点。这个想法是让 AJAX 像这样用 jQuery 带来 SVG Sprite (请参阅普通版本的帖子):

$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 Sprite ，它们的工作原理相同

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

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