Работа svg, ссылки и css эффекты [hover, fill]?

Question

[yura_89]

Здравствуйте!
Дизайнер мне скинул иконки в svg формате. Каждая иконка - каждый отдельный файл. Условно, по задачам верстки мне нужно сделать ховер эффект при наведении на иконку (банально, меняется плавно цвет).

Ознакомился с принципами svg иконок и понял (а может быть и нет), что css манипуляции делаются, если иконки вставлять через объект или инлайн.
Но тогда я столкнулся с другой проблемой: иконка у меня это ссылка, т.е. я делаю так:

<a href="#">а тут код иконки</a>

В итоге у меня нет курсора на иконки, и, как следствие, нет ни ховера ни перехода.

Сделал иконку через background, курсор и ссылка появились, но ховер не считывается.

Как поступить в данной ситуации? Спасибо!

Answer 1

[Stalker_RED]

.icon:hover {
  color: orange;
}
svg {
  fill: currentColor;
}

Демо: https://jsfiddle.net/2h9mym0k/

Comments

[yura_89]

через объект т.е. никак? Только инлайном?

[Stalker_RED]

Юрий Аванесов: Ага, я понял, вы хотите вставлять svg именно как img, и при этом менять цвет. Я боюсь у вас так не получится.
Но можно написать js скрипт который будет в фоне разворачивать такие img в svg
Или сделать из этих svg иконочный шрифт. Или сделать непрозрачный фон и прозрачный рисунок, тогда можно будет менять фоновый цвет через css.
Ну и конечно у вас в распоряжении остается прозрачность, filter: contrast(); и filter: brightness();, которые хоть и не меняют цвет на произвольный, но оттенки сделать не проблема.