SVG анимация блик элемента

Как при наведении на SVG-элемент реализовать эффект блика (когда осветлённый градиент проходит через весь элемент). Желательно без SMIL анимации, чтобы анимация касалась, как иконки, так и текста.
.game_block__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); width: 300px; height: 110px; outline: none; background: none; transition: .2s all; } .game_block__play svg { fill: #FE20A4; stroke: #2F0E3D; stroke-width: 2; stroke-miterlimit: 10 } .game_block__play text { font-size: 74px; font-family: Arial, sans-serif; transform: translate(110px, 84px); }

Ответ

Анимация градиента в зоне действия треугольного значка
Для адаптивности перенёс кнопку из css в svg. Обернул svg контейнером

При такой схеме вёрстки кнопку с анимационными эффектами можно вставить в любое место страницы HTML и позиционировать, масштабировать по мере своей необходимости.
Анимация начинается по клику begin="svg1.click" при желании можно сделать по наведению курсора begin="svg1.mouseover"
.container { width:25%; height:25%; }

Анимация градиента в зоне действия треугольного значка плюс буквы
Анимация в этом примере и в других, которые ниже начинается после клика на кнопке begin="svg1.click" при желании можно сделать по наведению курсора begin="svg1.mouseover" .container { width:50%; height:50%; }

Изменяем цветовую гамму, - чёрно-белый вариант, для этого меняем значения в атрибутах градиента stop-color
.container { width:45%; height:45%; }

Чёрно-желтый вариант
.container { width:45%; height:45%; }

Диагональный градиент
Для этого добавляем в определение градиента:

Анимация только значка
.container { width:100%; height:100%; }

Анимация значка и букв
.container { width:100%; height:100%; }