Stylize (css) SVG sprite with com border

Question

Stylize (css) SVG sprite with com border

Navigation

#1 by (1 votes)

1

I'm using svg sprite and would like to know how to stylize these icons, I can use fill: color , but I'd like to give a hover effect by leaving only the border.

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 understand better, I have a file myicons.svg summarized it to only one of the icons, then in the html I call the icon by class and in css I give style to this icon.

I would like to know if I can leave this icon with an unfilled border when using: hover.

html css svg

asked by anonymous 13.03.2017 / 15:37

1 answer

Show / Hide Fields using radiobutton and jQuery JavaScript load PartialView passing a Model

score 1 · Accepted Answer

To leave the icon unfilled simply add fill: transparent; to hover , like this:

svg:hover #id { 
   fill: transparent;
}

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