Как установить градиент для SVG по наведению?

Question

[Денис Букреев]

Есть иконка инстаграма - изначально она белая.
Но при наведении на нее должен накладываться градиент с плавной анимацией.

Я в гуголе нашел только как изначально поставить градиент. И это очень громоздкие решения, я ожидал, что с SVG все просто.

SVG вставляются через use

Answer 1

[Ярослав Иванов]

https://jsfiddle.net/7zdoosp9/2/

Answer 2

[Александр Таратин]

Одна иконка поверх другой и меняем прозрачность верхней.

Comments

[Денис Букреев]

да, это я рассматриваю, но это такой себе способ
нижняя будет добавлять толщины линиям верхней, а если ее скрывать так же по анимации, то анимация немного странно будет выглядеть

Answer 3

[Денис Букреев]

В общем, создал на странице градиент:

<linearGradient id="instagrad" x1="0" y1="100%" x2="100%" y2="0">
            <stop class="stop stop--1"
                  stop-color="#febb26"
                  offset="0"></stop>
            <stop class="stop stop--2"
                  stop-color="#f74e0b"
                  offset="33%"></stop>
            <stop class="stop stop--2"
                  stop-color="#de003d"
                  offset="66%"></stop>
            <stop class="stop stop--3"
                  stop-color="#c0019e"
                  offset="100%"></stop>
        </linearGradient>

Для svg по ховеру применил:

&:hover {
  svg {
    fill: url(#instagrad);
  }
}

Проблемес в том, что не работает анимация изменения цвета.

Comments

[Кирилл]

Первое правило: если что-то касается svg, то нужно сразу идти в блок Yoksel =)
css.yoksel.ru/svg-gradients

[Денис Букреев]

Кирилл Кубляков: я у него и смотрел, но у него нет моего случая

[Кирилл]

Денис Букреев: *у неё, конечно-же)

[Денис Букреев]

Кирилл Кубляков: оу