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

Question

[Олег Машко]

Добрый вечер всем! У меня возник вопрос относительно того как анимировать path елемент в svg картинке, анимировать круги и квадраты получается без особых проблем, но вот как переместить елемент который нарисован как листок и читается как path елемент? Помогите пожалуйста с советом, очень не хочется на гиф анимции делать. Заранее спасибо ответившим.

Comments

[everliving]

Переместить можно с помощью transform translate jsfiddle.net/2L3kgz1p если этого достаточно конечно

Answer 1

[Денис Инешин]

Анимация Path элементов из коробки возможна например с помощью:
d3js.org
greensock.com/tweenmax
paperjs.org

Comments

[Олег Машко]

Если не в тягость, можно обьяснить чайнику, как это сделать?) Фигура описана так Как его переместить к примеру по прямой вправо?

[Денис Инешин]

Олег Машко: jsfiddle.net/IonDen/utxwv45g ну примерно так, только вместо mySquare используйте свой path.

[Олег Машко]

Денис Инешин: ну квадрат понятно, что задается высота и ширина, а дальше по координатам, но у фигуры там целая куча координат и получается таким методом ее не забить.

[everliving]

Олег Машко: я писал Вам выше, используйте transform translate jsfiddle.net/2L3kgz1p

[Олег Машко]

everliving: ну впринципе через кес фреймы можно попробовать) Спасибо)

Answer 2

[Алексей]

snapsvg.io