Как анимировать svg?

Question

[vasIvas]

В проекте есть один компонент, который сделан на svg, сложная маска. И вот мне нужно чтобы эта маска ездила за курсором по горизонтали. Просто изменить координаты у меня получилось, но выглядит это ужасно. Решение одно, анимировать движение. Я знаю о нескольких библиотеках, как для облегчения работы, так и просто анимация, но использовать их не хочу. Не хочется из-за одного элемента тащить библиотеку. По этому вопрос - можно как-то из жс управлять анимацией svg?

Answer 1

[Александр Голубев]

Обычный transition должен заработать, если меняются параметры подвластные CSS (Top, Bottom, Left, Right, Padding, Margin и т.д.)

<svg style="transition: all .8s;"><path></path></svg>

Только позиция SVG должна меняться.

Comments

[vasIvas]

А как Вы тогда делаете маску? У меня просто сделано ...
И rect не получается двигать с помощью css...

[Александр Голубев]

vasIvas: Я определяю позицию именно svg. В примере увеличивается отступ при наведении на элемент курсора:
codepen.io/piocan/pen/zvPzed

[Александр Голубев]

vasIvas: но можно изменять любые другие параметры, не только padding, просто при hover в примере другие параметры будут глючить.