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

Question

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

Такие дела.

Есть SVG, на которую накладывается градиент (при помощи <defs /><linearGradient />)
И требуется повесить перелив (блик) по градиенту на эту SVG.
Сейчас я вижу один способ: сидеть и как болван перебирать каждый цвет в градиенте в keyframe и добиваться нужного результата. Но это, по-моему, идиотизм.

Уверен, есть способы проще.
Может кто-нибудь знает такие способы, чтобы не перебирать каждый цвет, а, может, сверху наложить?
Или может просто смещение этого градиента сойдет за перелив - но как это сделать из CSS, если за это отвечает аттрибут offset?

Answer 1

[Павел Коковин]

Или может просто смещение этого градиента сойдет за перелив - но как это сделать из CSS, если за это отвечает аттрибут offset?

Сойдет. Делаешь два одинаковых градиента, и каждый анимируешь примерно так:

from {
    transform: translateY(-100%);
}
to {
    transform: translateY(100%);
}

Только задержку поставь одному из них

Answer 2

[Максим]

codepen.io/Geyan/pen/MbyXmq - это первый пример без svg
https://developer.mozilla.org/en-US/docs/Web/SVG/E... это с svg (есть песочница с примером)