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

652

21 апреля 2017, 19:47

Cвойства:

SVG иконка будет ссылкой (только область svg будет кликабельной, а не весь блок в котором находится иконка).
Смена цвета при наведении курсора.
Возможность корректировки положения внутри блока.

На просторах интернета прочитал множество статей, возможно есть более удачные и корректные практики на ваш взгляд. Поделитесь, пожалуйста, опытом. К примеру если встроить SVG в html документ, то он не будет кэшироваться, что не очень хорошо, если будет несколько SVG.

Какой оптимальный вариант на Ваш взгляд?

Answer 1

из своего опыта могу предложить два варианта:

Если много svg иконок, собрать все в один шрифт, потом использовать эти шрифты где нужно через font-family: <название шрифта>, а нужный шрифт через content: 'id символа/иконки'. А дальше вешаешь в css :hover и меняешь color для шрифта, оч удобно.
Как ты писал, вставлять в html svg, и так же на css можешь менять через :hover, но только там у тебя будет свойство не color, а fill

если я ничего не упустил, то тут jquery тебе вообще не нужен