I’m using SVG logo that will be used as anchor links. By default, the SVG are black and I wanted them to be a shade of purple, so i add fill="#7b0aa8
in the SVG file on VS Code.
But I can’t make the SVG change to a specific color with mouse hover.
If I use filter generated with codepen sosuke, the filter will change the color based on the current color(In this case, purple), but the code is made to change base on black, so I can’t use the filter properly.
Is there a better way to deal with SVG anchor links so I can change the color in CSS precisely?
<header class="header">
<a class="header__link" target="blank" href="#">
<img class="icone" src="./assets/icons/iconmonstr-github-1.svg" alt="Logo GitHub">
</a>
<a class="header__link" target="blank" href="#">
<img class="icone" src="./assets/icons/iconmonstr-linkedin-3.svg" alt="Logo LikedIn">
</a>
<a class="header__link" target="blank" href="#">
<img class="icone" src="./assets/icons/itchio-textless-black.svg" alt="">
</a>
</header>
2
Answers
If you include the svg as code then you should be able to just use the hover event on the path. In this example it works better if you use the parent anchor to control the hover. Notice the second example hover only works in actual fill areas.
Yes if you use it as code, with
fill="currentColor"
in the svg code. Then you can use CSS to use the normalcolor
property