How to color fill an SVG image on hover?

Question

css

I connect this way <img class="mapkr1" src="img/map/1.svg" alt="">.
I'm trying to fill with color:

.mapkr1:hover {
fill: orange;
}

But nothing happens.

Answer 1

css is correct, but will not work if in html as an image. how to insert svg

Answer 2

If for some reason you don't like the option of inserting SVG directly into the document, you can include an SVG file using the ability to control via CSS.
The html file will be:
And you also need to add to the SVG file before the opening < svg > tag:
And already in svg.css :

svg:hover {
fill: orange;
}