Как изменять цвет элементов иконок в SVG-спрайтах при наведении?

Question

[aspirin37]

https://codepen.io/aspirin37/pen/VWVOQQ

Можно ли заменить конкретному элементу иконки цвет заливки при наведении, не затрагивая при этом все остальное? То есть как-либо повлиять на один конкретный path, который находится в спрайте

( в моем случае, изменить зеленый фон иконки, а белые части оставить как есть )

Answer 1

[chimir]

В SVG уберите fill и задайте его в css

https://jsfiddle.net/chimir/e1tj9mdy/

Comments

[aspirin37]

То, что нужно, спасибо )

Answer 2

[alvvi]

Возможно, цвет заливки указан в аттрибуте style, а его перебить можно только стилями с !important.

В иделае заливки должны быть прописаны в специальных SVG-аттрибутах, в некоторых графических редакторах такую опцию можно выставить в настройках экспорта. Так же у SVGO есть плагин "convertStyleToAttrs", который позволяет конвертировать аттрибут style в SVG-аттрибуты, при наличии готовых иконок советую воспользваться именно им. SVG-аттрибуты полезны тем, что имеют меньший приоритет, чем CSS-селектор, поэтому их возможно легко переопределить в стилях.

Чтобы было чуток нагляднее:
https://jsfiddle.net/0so00j9z/3/
у обоих есть класс blue, но у первого style перебивает стили класса.

Comments

[alvvi]

aspirin37: вставьте их отдельно на jsfiddle и отправьте сюда

[aspirin37]

https://codepen.io/aspirin37/pen/VWVOQQ

Ну вот, допустим, я хочу изменить цвет заливки с зеленого на красный при наведении, но белые элементы оставить как есть - как это сделать?

[alvvi]

aspirin37: про наведение в вопросе ничего сказано не было.
Дело в том, что при таком спрайте вы никак не получите доступ к внутренним path чтобы обработать их при ховере, поскольку для внешнего тэга SVG их не существует. Нужно либо вставлять svg инлайново, либо обрабатывать hover в js (помня при этом, что изменение самого спрайта изменят его во всех местах, где он используется).

[aspirin37]

Спасибо!

Answer 3

[tyzberd]

если спрайт в html тогда так https://jsfiddle.net/tyzberd/7eopuudj/1/
если в файле, тогда не указывать fill

Comments

[aspirin37]

https://codepen.io/aspirin37/pen/VWVOQQ

А если элементов внутри много, но я хочу изменить только один? Например, заливку при наведении сделать синей, а белые элементы оставить как есть. То есть тут я бы хотел изменить не всю svg целиком, а только один конкретный path

[alvvi]

У вас и без !important все работает, SVG-аттрибуты перебиваются стилями на ура.

[tyzberd]

https://tympanus.net/codrops/2015/07/16/styling-sv...