1

Estou usando svg sprite e gostaria de saber como faço para estilizar esses ícones, eu consigo usar o fill: color, mas eu gostaria de dar um efeito hover deixando apenas a borda.

Vou colocar os códigos que tenho aqui para fazer o icone aparecer.

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
    <symbol id="facebook" viewBox="0 0 233.1 233.1">
        <path class="st0" d="M116.5,0C52.2,0,0,52.2,0,116.5c0,64.4,52.2,116.5,116.5,116.5c64.4,0,116.5-52.2,116.5-116.5C233.1,52.2,180.9,0,116.5,0C116.5,0,116.5,0,116.5,0z M145.7,80.2h-15c-4,0-6.9,3.4-6.9,7.7v6.7h21.4l-3.5,21.7h-18v58.2h-21.9v-58.2H87.3V94.6h14.6V83.5l0,0c0.4-12.6,4.8-24.7,26.2-25.4V58h17.7L145.7,80.2L145.7,80.2z"/>
      </symbol>
  </defs>
</svg>

CSS:

.social-buttons svg use
{
  fill: #fff;
}

HTML:

<a href="#">
  <svg class="icon-facebook">
    <use xlink:href="svg/myicons.svg#facebook"></use>
  </svg>
</a>

Para entender melhor, eu tenho um arquivo myicons.svg resumi ele a somente um dos icones, ai no html eu chamo o icone pela class e no css eu dou estilo a esse icone.

Gostaria de saber se consigo deixar esse icone so com borda sem preenchimento quando utilizar o :hover.

2
  • NÃO use Trecho de código (Stack Snippets) desta maneira, leia: meta.pt.stackoverflow.com/q/2115/3635
    – Syzoth
    Commented 13/03/2017 às 14:42
  • @GuilhermeNascimento OK Obrigado.
    – user27585
    Commented 13/03/2017 às 14:45

1 Resposta 1

0

Para deixar o icone sem preenchimento basta adicionar fill: transparent; no hover, dessa maneira:

svg:hover #id { 
   fill: transparent;
}

A questão da borda é um pouco mais complicada pois a propriedade border não funciona, então minha sugestão é desenhar um <rect> em volta do icone com fill:none; e usar o traço do <rect> como a borda.

7
  • Sim o preenchimento blz eh tranquilo, mas o problema ta na borda. Eu li algo sobre <rect> mas eu teria que passar valores tipo x e y, e onde eu pego esses valores?
    – user27585
    Commented 13/03/2017 às 15:14
  • @Erick tu já tentou adicionar uma borda normalmente ali no própria tag <svg> do teu HTML? Aqui tem um exemplo bem simples de um rect em svg, p/ movimentar ele é só colocar os attr x e y. w3schools.com/graphics/tryit.asp?filename=trysvg_rect
    – Mathiasfc
    Commented 13/03/2017 às 15:20
  • Sim ja tentei, mas se eu colocar na tag <svg> a borda fica em um quadrado externo a tag <use> que seria o certo, mas não consigo add a borda nela, pelo que vi tem que usar esse <rect>mesmo, minha dúvida era em relação a esses valores de xe y. Vou dar uma olhada no link vlw
    – user27585
    Commented 13/03/2017 às 16:40
  • @Erick acho que agora entendi o que tu ta querendo, se o ícone não for um retângulo realmente fica um pouco mais difícil, ai tem que desenhar ponto a ponto, caso eu encontre algo te aviso.
    – Mathiasfc
    Commented 13/03/2017 às 16:47
  • Isso nesse caso o icone é redondo rs ... Mas vlw man vou procurar daqui tb. Obrigado.
    – user27585
    Commented 13/03/2017 às 16:51

Você deve fazer log-in para responder a esta pergunta.