Почему не отрабатывается :hover для svg?

Question

[Лариса]

Есть картинка в формате .svg
Стили прописаны на :hover плюс media запрос
по media запросу при уменьшении ширины окна изменяется цвет картинки

вот тут в песочнице все работает
выкладываю на сервер и :hover перестает работать, хотя media запрос по прежнему работает

Никак не могу понять как так-то(

Прошу помощи!

Если можно написать пример как надо правильно поставить в html документ, чтобы все работало

Answer 1

[Егор Живагин]

Svg, вставленные через тэг img , перестают быть svg )

Comments

[Лариса]

почему тогда он отрабатывается как svg и при этом продолжает работать медиа стиль

[Егор Живагин]

Лариса, он вставлен как картинка = он ведёт себя как картинка. Если вы хотите управлять св-вом fill , или любым другим свойством svg - вставляйте полностью, как вставили в песочницу (только без строчки с xml)

[SelenIT3]

Точнее сказать, при вставке через `<img>` SVG-документ теряет интерактивность. Размеры собственного контейнера (для `@media`) он считать еще может, но вот на `:hover` и прочие действия юзера уже не реагирует. Но будет реагировать, если вставлять через `<object>`. Ну и если писать инлайново, само собой)