Style (css) SVG with border

Asked

Viewed 515 times

1

I am using svg Sprite and would like to know how to style these icons, I can use the fill: color, but I’d like to give a Hover effect by just leaving the edge.

I’ll put the codes I have here to make the icon appear.

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>

To better understand, I have a file myicons.svg summarized it to only one of the icons, ai in html I call icone by class and in css I give style to this icone.

I would like to know if I can leave this icon only with an unfilled edge when using :Hover.

html css svg

  • DO NOT use Code snippet (Stack Snippets) like this, read: http://meta.pt.stackoverflow.com/q/2115/3635

  • @Guilhermenascimento OK Thank you.

1 answer

0


To leave the icon unfilled simply add fill: transparent; in the hover, in that way:

svg:hover #id { 
   fill: transparent;
}

The question of the edge is a little more complicated because the property border does not work, so my suggestion is to draw a <rect> around the icon with fill:none; and use the trace of <rect> like the edge.

  • Yes the blz filling is quiet, but the problem ta on the edge. I read something about <rect> but I would have to pass values like x and y, and where I get these values?

  • @Have you ever tried to add an edge to the <svg> tag of your HTML? Here is a very simple example of a rect in svg, p/ move it just put the attr x and y. https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_rect

  • Yeah, I tried, but if I tag <svg> the edge is on an external square to tag <use> that would be right, but I can’t add the edge to it, so I saw you have to use that <rect>even, my doubt was in relation to these values of xand y. I’ll take a look at the vlw link

  • @Erick I think now I understand what you want, if the icon is not a rectangle really gets a little more difficult, then you have to draw point by point if I find something warning.

  • That in this case the icone is round rs ... But vlw man I will look from here too. Thank you.

  • @Erick opa, ai is not so difficult, try to draw a circle then with Fill:Transparent; https://www.w3schools.com/graphics/svg_circle.asp

  • But the problem that is the facebook icon so that F that goes inside the circle would have q to be with contour tb, maybe the way eh create the icon again in svg in Illustrator only with contour.

Show 2 more comments

Browser other questions tagged html css svg

You are not signed in. Login or sign up in order to post.