Como é que uso ícones SVG em HTML?
tenho um ficheiro svg com 3 ícones.
quando o importo através da marca <img>
, fico com os 3 Ícones um por baixo do outro.
Quero usar os ícones de seguida, um ao lado do outro.
Como posso usá-los separadamente?
O .ficheiro 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>
Obrigado!
3 answers
Use o ficheiro SVG como uma imagem.
Criar um elemento do tamanho de um ícone, escondendo o excesso:
.icon {
display: inline-block;
width: 16.3px;
height: 13.45px;
overflow: hidden;
}
Posicione o SVG dentro do elemento para que o ícone apareça através de:
.icon > img {
position: relative;
}
.darkStar > img {
top: 0;
}
.lightStar > img {
top: -13.45px;
}
Demo (usando SVG incorporado em vez de um <img>
ligado, o que derrota o propósito, mas é mais fácil de demo aqui):
.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>
Pode usar Os identificadores de fragmentos para mostrar apenas uma parte do ficheiro SVG em qualquer elemento em particular img
.
A vantagem desta abordagem é que as" imagens individuais " no seu ficheiro SVG estão definidas no seu ficheiro SVG , por isso, ao usá-lo noutro local, não precisa de saber nada sobre a estrutura interna, pode apenas perguntar o que deseja pelo nome:
<button>
<img src="x.svg#star1" alt="*">
</button>
A solução mais compatível com plataformas é adicionar alguns SVG view
que definem qual parte da imagem a mostrar para qual fragmento de ID. A sintaxe da vista é semelhante ao atributo global viewBox
do elemento root SVG
*:
<view id="star1" viewBox="0 0 10 10"/>
Aqui está um bom post no blog (com um exemplo ao vivo) que explica a técnica em grande detalhe.
*note que eu não calculei esse valor viewBox
para o seu SVG, você terá que descobrir por si mesmo.
Http://codepen.io/jonnowitts/pen/waONVV
Aqui ele tem o SVG alinhado verticalmente numa fila. <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>