如何在 HTML 中使用 SVG 图标？

Question

我有一个带有 3 个图标的 svg 文件。

当我通过 <img> 标签导入它时，我得到了 3 个图标，它们一个接一个。 我想连续使用图标，一个接一个。 如何单独使用它们？

.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>

谢谢！

Answer 1

我不确定您是指垂直还是水平，但这是我从 Codepen.io 找到的，其中包含许多您可能想要查看的 SVG 示例。

http://codepen.io/jonnowitts/pen/waONVV

在这里，他将 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>

Answer 2

您可以使用片段标识符在任何特定的 img 元素中仅显示 SVG 文件的一部分。

这种方法的优点是您的 SVG 文件中的“单个精灵”是在您的 SVG 文件中定义的，因此在其他地方使用它时，您无需了解任何内部结构，你可以直接问你想要的名字：

<button>
  <img src="x.svg#star1" alt="*">
</button>

最跨平台兼容的解决方案是添加一些 SVG views，它们定义图像的哪个部分显示哪个 ID 片段。视图语法类似于根SVG元素*的全局viewBox属性：

<view id="star1" viewBox="0 0 10 10"/>

这是一个good blog post（和a live example），它非常详细地解释了这项技术。

_{*请注意，我尚未计算出您的 SVG 的 viewBox 值，您必须自己计算。}

Answer 3

将 SVG 文件用作精灵。

创建一个图标大小的元素，隐藏溢出：

.icon {
    display: inline-block;
    width: 16.3px;
    height: 13.45px;
    overflow: hidden;
}

将 SVG 放置在元素内，以便图标显示出来：

.icon > img {
    position: relative;
}
.darkStar > img {
    top: 0;
}
.lightStar > img {
    top: -13.45px;
}

演示（使用内联 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>