跨域svg精灵

问题描述

我知道有很多方法可以在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方法的替代方法？

解决方案

感谢进行设置。对于那些使用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精灵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！