Как сделать заливку цветом картинке SVG при наведении?

Question

[ravlex]

Подключаю таким способом <img class="mapkr1" src="img/map/1.svg" alt=""> .
Пытаюсь залить цветом:

.mapkr1:hover {
fill: orange;
}

Но ничего не происходит.

Answer 1

[Максим Тимофеев]

css верно, но не будет работать если в html как картинка. Надо как svg вставлять

Answer 2

[Minary]

Если по какой-либо причине вариант со вставкой SVG непосредственно в документ вам не нравится, можно подключить SVG-файл используя с возможностью управлять через CSS.

В html файле будет:

<object type="image/svg+xml" data="img/map/1.svg"></object>

А так же нужно добавить в SVG-файл перед открывающим тегом < svg > :
<?xml-stylesheet type="text/css" href="svg.css" ?>

А в svg.css уже :

svg:hover {
fill: orange;
}