How to change the color of an <svg> image when I hover the mouse
Guys, I have these svg's and I don't have their code. They are static and I added these in the code with the <img> tag. How do I change the color when I hover? In the challenge's figma file it asks me to change the color to orange, but I can't use the fill or the background-color.
Github repo: https://github.com/sircarloschaves/equalizer-landing-page
Live page: https://sircarloschaves.github.io/equalizer-landing-page/
GitHub
GitHub - sircarloschaves/equalizer-landing-page: Equalizer landing ...
Equalizer landing page responsive using CSS Grid, Flexbox and Media Queries. - GitHub - sircarloschaves/equalizer-landing-page: Equalizer landing page responsive using CSS Grid, Flexbox and Media Q...
2 Replies
Can't you use <svg> instead of <img>? svg has the fill property you can change on hover state, img I don't think you can change. img elements are "raster" images and every pixel has color and position defined. svg is algorithms, and the position and color values can change
You can’t adjust styles on an externally linked svg, that’s why using them inline is so attractive. You could throw the svg at the bottom of your html, with <defs></defs> tags and an ID then use it where you want it with
<svg><use href=“#mySvg”></use></svg>
Gives you the best of both worlds; it’s not littering your markup as it’s tucked on the bottom but you can still apply styles to it.