Как запустить шарик по клику на svg по пути?

Question

[Максим]

У меня не получается именно запустить по пути через клик на smil...
Всегда мешает cx и так же cy - шарик куда то улетает - анимация происходит где вне
Как это делается ?
https://codepen.io/topicstarter/pen/eYggPZX

Но если у circle убрать cx и cy то анимация проходит как надо : https://codepen.io/topicstarter/pen/poRRxPq

Answer 1

[RAX7]

Анимация вдоль кривой работает примерно так:
- берутся координаты точки на кривой (px=242, py=51)
- берутся координаты центра окружности (сx=242, сy=51)
- значения складываются (x = cx + px, y = cy + py) и окружность перемещается в полученные координаты.

Исправить можно перемещением начальной точки кривой в точку (0, 0) и последующим сдвигом этой кривой при помощи transform=translate()

<path d="m 0 0 c-118.35-13.036-33.219 195.03-196.4 83.472" fill="none" stroke="#000" stroke-width=".2" id="path" transform="translate(241.82 50.942)"/>
<circle cx="241.82" cy="50.942" r="7.3" fill="#fff" stroke="#006700" id="circle" />

Comments

[Максим]

а transform для path кроссбраузерный ?

[RAX7]

Максим Ленский, да https://developer.mozilla.org/en-US/docs/Web/API/S...

[Максим]

RAX7, про точку 0 0 я сам бы ни когда не догадался бы .. спасибо ...