我有一个带有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>
谢谢!
解决方法
我不确定你的意思是纵向还是横向,但这是我从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>