跨域svg精灵 [英] Cross domain svg sprite

问题描述

我知道有很多方法可以在HTML中使用SVG sprites。我对此日期的偏好一直是使用类似于

 < div class =container> 
< svg class =icon> 
< title>图标标题< / title> 
< use xlink：href =/ svg / sprite.svg＃icon/> 
< / svg> 
< / div> 
  

然而，现在我想从子域加载精灵，如下所示：

 < div class =container> 
< svg class =icon> 
< title>图标标题< / title> 
<使用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方法的替代方法？

解决方案

感谢 css-tricks 我已经能够解决如何做到这一点。这个想法是让AJAX将SVG精灵与jQuery一起使用（请参阅post for vanilla版本）：

  $ j.get （https://sub.domain.com/svg/sprite-home.svg，函数（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类= 容器 > 
< svg class =icon> 
< title>图标标题< / title> 
< use xlink：href =＃icon/> 
< / svg> 
< / div> 
  

这项技术有很多优点：

• SVG sprite被缓存


• 使用起来非常简单，只需引用图标


• 您可以请求几个SVG精灵和他们都工作相同

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

  location〜* \.svg $ {
 .. 。
 add_header'访问控制 - 允许 - 方法''GET'; 
 add_header'访问控制 - 允许来源''https://your.domain.com'; 
} 
  

I'm aware that there are plenty of methods to use SVG sprites in HTML. My preference to this date has been to use something like

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

However, now I wanted to load the sprite from a subdomain, like this:

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

Unfortunately, this doesn't work as the file is not fetched. I've tried with <object> as well, but that doesn't seem to work either.

So far, I'm only able to use

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

It's ok as a quick fix, as this doesn't involve much refactoring. However, this also means the HTML gets bloated.

With the <use> method the sprite gets cached. But with the include method the sprite isn't cached, only gets embedded, and so it is far from ideal.

Does anybody use any alternative to the php include method that is compatible with cross domain requests and browser caching?

解决方案

Thanks to this post at css-tricks I've been able to work out how to do this. The idea is to AJAX to bring the SVG sprite with jQuery like this (see post for vanilla version):

$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]);
});

What this does is insert the SVG at the beginning of the document. Unlike the original post, I've added a class to make it hidden, as otherwise you get a blank big space at the top in Chrome. The result is great (it works with local files too) and now you can reference icons by just their id.

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

There are many advantages to this technique:

• SVG sprite is cached
• Really simple to use as you only reference the icon
• You can request several SVG sprites and they all work the same

The only thing to bear in mind is that, this requires CORS AJAX to be set up. For those using nginx, it would be simple enough:

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

这篇关于跨域svg精灵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！