How to fire balloon on click on svg along path?

Question

Animation

I can't exactly launch it on the way through clicking on smil...
It always interferes with cx and also cy - the ball flies somewhere - the animation happens somewhere outside
How is it done?
https://codepen.io/topicstarter/pen/eYggPZX

But if you remove cx and cy from the circle, then the animation goes as it should: https://codepen.io/topicstarter/pen/poRRxPq

Answer 1

Animation along a curve works like this:
- take the coordinates of a point on the curve (px=242, py=51)
- take the coordinates of the center of the circle (сx=242, sy=51)
- add the values ​​(x = cx + px, y = cy + py) and the circle is moved to the given coordinates.
You can fix it by moving the starting point of the curve to the point (0, 0) and then shifting this curve withtransform=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" />