I'd like to change the fill of an SVG image when I hover over it.
Right now I have a black question mark exported from Illustrator to SVG. I can put on my page with the img tag and it displays fine, however I have no idea how to change the color in code.
It's important to remember that to do so, you cannot enclose the svg file in the common HTML <img/> tag, use instead the <svg>...</svg> as shown in the post.
EDIT: svg on w3schools
I added a link to w3schools so you can see more properties of the svg object
If you need to do hover effects in svg you shouldn't use <img> tags. Instead reference the svg with an <iframe>, <object> or <embed> tag. If you want to save a http GET request you can put the svg markup inline in the html document.
Here's an example showing a simple fill hover effect inside an svg, and another one (slightly more complex that creates an outline on hover using a filter). Anyway, it's basically about applying a :hover CSS rule to set the fill color.
An example with all of the above ways of using svg can be seen here.
If you can post your code, maybe we can troubleshoot it for you.
Try following this: http://tutorials.jenkov.com/svg/svg-and-css.html
Alternatively (not exclusive to SVG), use this type of code with different images:
<img src="image1.svg" onmouseover="this.src='image2.svg'" onmouseout="this.src='image1.svg'">
Live demo: http://jsfiddle.net/JNChw/
©2020 All rights reserved.