如何在 HTML 中使用 SVG 图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32237481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use SVG icons in HTML?
提问by user3712353
I have an svg file with 3 icons.
我有一个带有 3 个图标的 svg 文件。
When I import it via the <img>tag, I get the 3 icons one below each other.
I want to use the icons in a row, one next to the other.
How can I use them separately?
当我通过<img>标签导入它时，我得到 3 个图标，一个在一个下方。我想连续使用图标，一个挨着另一个。我如何单独使用它们？
The .svg file:
.svg 文件：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.3px"
height="26.9px" viewBox="0 0 16.3 26.9" enable-background="new 0 0 16.3 26.9" xml:space="preserve">
<g id="bg">
</g>
<g id="ui">
<g>
<polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3 "/>
<polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8
3.8,26 4.6,21.3 1.1,18 6,17.3 "/>
</g>
</g>
<g id="pop_ups">
</g>
</svg>
Thanks!
谢谢！
回答by gilly3
Use the SVG file as a sprite.
使用 SVG 文件作为精灵。
Create an icon-sized element, hiding the overflow:
创建一个图标大小的元素，隐藏溢出：
.icon {
display: inline-block;
width: 16.3px;
height: 13.45px;
overflow: hidden;
}
Position the SVG within the element so the icon shows through:
将 SVG 放置在元素中，以便图标显示：
.icon > img {
position: relative;
}
.darkStar > img {
top: 0;
}
.lightStar > img {
top: -13.45px;
}
Demo (using inline SVG instead of a linked <img>, which defeats the purpose, but is easier to demo here):
演示（使用内联 SVG 而不是链接<img>，这违背了目的，但在这里更容易演示）：
.icon {
display: inline-block;
width: 16.3px;
height: 13.45px;
overflow: hidden;
}
.icon > svg {
position: relative;
}
.darkStar > svg {
top: 0;
}
.lightStar > svg {
top: -13.45px;
}<span class="icon lightStar">
<svg width="16.3px" height="26.9px">
<polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" />
<polygon points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 3.8,26 4.6,21.3 1.1,18 6,17.3" fill="none" stroke="#000000" stroke-miterlimit="10" />
</svg>
</span>
<span class="icon darkStar">
<svg width="16.3px" height="26.9px">
<polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" />
<polygon points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 3.8,26 4.6,21.3 1.1,18 6,17.3" fill="none" stroke="#000000" stroke-miterlimit="10" />
</svg>
</span>回答by teachtyler
I'm not sure if you mean vertically or horizontally, but here's something I found from Codepen.io which has a lot of SVG samples you might want to go through.
我不确定您的意思是垂直还是水平，但这是我从 Codepen.io 中发现的一些内容，其中包含许多您可能想要查看的 SVG 示例。
http://codepen.io/jonnowitts/pen/waONVV
http://codepen.io/jonnowitts/pen/waONVV
Here he has SVG's lined up vertically in a row.
在这里，他将 SVG 垂直排列成一排。
<button type="button" id="positive">
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="42" viewBox="-9 0 38 40" preserveAspectRatio="xMidYMid meet">
<path class="check" fill="none" d="M0 20 L8 28 L25 10" stroke="white" stroke-width="3"/>
</svg>
<span>Positive</span>
</div>
</button>
<button id="negative">
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="42" viewBox="-9 0 38 40" preserveAspectRatio="xMidYMid meet">
<path class="cross-1" fill="none" d="M0 10 L20 30" stroke="white" stroke-width="3"/>
<path class="cross-2" fill="none" d="M20 10 L0 30" stroke="white" stroke-width="3"/>
</svg>
<span>Negative</span>
</div>
</button>
<button id="warning">
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="42" viewBox="-3 0 38 40" preserveAspectRatio="xMidYMid meet">
<polygon class="triangle"
stroke="white"
stroke-width="2"
fill="none"
points="15,4 0,34 30,34"
/>
<path class="exclaim-1" d="M15 14 L15 22 Z" stroke-width="4" stroke="white" fill="none" />
<path class="exclaim-2" d="M15 24 L15 29 Z" stroke-width="4" stroke="white" fill="none" />
</svg>
<span>Warning</span>
</div>
</button>
回答by Jeremy
You can use fragment identifiersto display only part of the SVG file in any particular imgelement.
您可以使用片段标识符在任何特定img元素中仅显示 SVG 文件的一部分。
The advantage of this approach is that the "individual sprites" in your SVG file are defined in your SVG file, so when using it elsewhere you don't need to know anything of the internal structure, you can just ask for what you want by name:
这种方法的优点是，在你的SVG文件的“个体精灵”的定义在你的SVG文件，所以在使用它在其他地方你不需要知道内部结构的任何事情，你可以要求你想要什么用姓名：
<button>
<img src="x.svg#star1" alt="*">
</button>
The most cross-platform-compatible solution is add some SVG views which define which part of the image to show for which ID fragment. The view syntax is similar to the global viewBoxattribute of the root SVGelement*:
最跨平台兼容的解决方案是添加一些 SVGview定义图像的哪个部分显示哪个 ID 片段。视图语法类似于viewBox根SVG元素*的全局属性：
<view id="star1" viewBox="0 0 10 10"/>
Here's a good blog post(with a live example) which explains the technique in great detail.
这是一篇很好的博客文章（带有一个活生生的例子），它非常详细地解释了该技术。
*note that I haven't calculated that viewBoxvalue for your SVG, you'll have to figure it out yourself.
*请注意，我还没有viewBox为您的 SVG计算该值，您必须自己弄清楚。
