外部文件中的 SVG 精灵 [英] SVG sprite in external file
问题描述
我正在为我的应用程序使用由 IcoMoon App 创建的带有 SVG Sprite 的图标系统.在 index.html 我现在有这样的东西:
I'm using an icon system for my app with SVG Sprite, created by IcoMoon App. In index.html I have now something like this:
<html>
<head>...</head>
<body>
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="752" height="80" viewBox="0 0 752 80">
<defs>
<g id="icon-home">
<path class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
</g>
<g id="icon-camera">
<path class="path1" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
</g>
</defs>
</svg>
...some html code...
<!-- an image -->
<svg class="icon" viewBox="0 0 32 32"><use xlink:href="#icon-home"></use></svg>
</body>
<html>
我需要将 svg 精灵移动到文件中，然后将其作为外部资源包含在内.我该怎么做?
I need to move the svg sprite in a file and then include it as an external resource. How can I do this?
推荐答案
试试这个:
创建一个 SVG 文件，sprites.svg
Create an SVG file, sprites.svg
将以下内容放入其中:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="icon-home" class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
<path id="icon-camera" class="path1" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
</svg>
然后，只要您想包含在 use 元素中.
Then whenever you want to include in a use element.
<svg class="icon" viewBox="0 0 32 32">
<use xlink:href="sprites.svg#icon-home" />
</svg>
(此时，Internet Explorer 有这个问题.IE 需要不同的方法.如果你愿意，我也可以展示 IE 需要什么)
(At this time, Internet Explorer has a problem with this. IE would need a different approach. If you want, I can also show what's necessary for IE)
编辑 - 跨浏览器支持:将 SVG sprite 元素放在 XML 文件中并将它们调用到 defs 元素中.
EDIT - Cross-browser support: Place SVG sprite elements in an XML file and call them into a defs element.
XML 文件，命名为 sprites.xml:
XML file, named sprites.xml:
<?xml version="1.0" encoding="UTF-8"?>
<SPRITES xmlns="http://www.w3.org/2000/svg">
<path id="iconHome" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
<path id="iconCamera" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
</SPRITES>
使用 Javascript 传播 defs 元素的示例 HTML 文件.
An example HTML file with Javascript to propagate the defs element.
<!DOCTYPE HTML>
<html>
<head>
<title>Sprites</title>
</head>
<body onLoad=loadSprites()>
<svg id=mySVG width="400" height="400">
<defs id="spriteDefs" />
<use xlink:href="#iconHome" transform="translate(100 100)" />
<use xlink:href="#iconHome" transform="translate(200 100)" />
<use xlink:href="#iconHome" transform="translate(300 100)" />
<use xlink:href="#iconCamera" transform="translate(100 200)" />
<use xlink:href="#iconCamera" transform="translate(200 200)" />
<use xlink:href="#iconCamera" transform="translate(300 200)" />
<use xlink:href="#iconHome" transform="translate(200 300)" />
</svg>
<script>
function loadSprites()
{
var xmlFile="sprites.xml"
var loadXML = new XMLHttpRequest;
loadXML.onload = callback;
loadXML.open("GET", xmlFile, true);
loadXML.send();
function callback()
{
//---responseText---
var xmlString=loadXML.responseText
//---DOMParser---
var parser = new DOMParser();
var mySpritesDoc=parser.parseFromString(xmlString,"text/xml").documentElement ;
var addSprites=mySpritesDoc.childNodes
for(var k=0;k<addSprites.length;k++)
{
var sprite=addSprites.item(k).cloneNode(true)
document.getElementById("spriteDefs").appendChild(sprite)
}
}
}
</script>
</body>
</html>
这篇关于外部文件中的 SVG 精灵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
