CODEWITHSUNDEEP
htmlcsssvg
Stepan Shatkovski
Stepan Shatkovski

Reputation: 615

SVG hover fill doesn't work in FireFox

I firstly add fill for SVG, then on :hover change it to another color. It works in all browsers except FireFox (don't know about IE). 

svg {
  height: 25px;
  width: 40px;
  fill: #fff;
}
.facebook:hover {
  fill: #3b5998;
}

It works fine in FF when I delete first fill for svg, but that's obviously not a solution.

Any ideas how to fix that?

Here is a pen http://codepen.io/shatkovski/pen/aZzmJJ?editors=1100

Upvotes: 2

Views: 1621

Answers (1)

nixkuroi
nixkuroi

Reputation: 2279

Firefox svg hover doesn't work well with <use>.

If you put the path inside the svg element, it works fine:

<svg class="facebook" viewBox="0 0 510 510">                                           
    <path d="M459 0H51C23 0 0 23 0 51v408c0 28.1 23 51 51 51h408c28.1 0 51-22.9 51-51V51C510 23 487.1 0 459 0zM433.5 51v76.5h-51c-15.3 0-25.5 10.2-25.5 25.5v51h76.5v76.5H357V459h-76.5V280.5h-51V204h51v-63.7C280.5 91.8 321.3 51 369.8 51H433.5z" />
</svg>

Upvotes: 1

Related Questions