Как исправить svg анимацию?

Question

[Dnebl]

Вот пример анимации

https://codepen.io/anon/pen/ayMpLQ?editors=1000

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

P.S
Можно ли для path элемента указать что бы он рисовался в координатах X=0 Y=0?
Проще говоря что то типа этого

position:absolute;
top:0;
left;0;

Answer 1

[Николай Чуприк]

Надо расположить круг на начале кривой, а не в стороне от неё. Он движется по кривой, но начиная с той точки, где сам изначально отрисован.

Comments

[Dnebl]

В примерах видел что для элементов указывают координаты x=0 y=0.
Тогда они начинают двигаться ровно по кривой.
Можно ли похожие координаты задать для элементов path,как в примере ниже.
<rect x="0" y="0" width="150" height="150" />

[Николай Чуприк]

Это при условии, что кривая тоже начинается в точке (0, 0).