Catch changes on SVG element circle and change attributes elsewhere via js

Question

I have an embedded SVG in an HTML document. An (SVG) circle is animated using . I was trying to find a way to put some kind of event listener on that

Answer 1

An event is fired when animations begin, end or repeat but not (as you want) whenever there is a change of animation value.

As animations are deterministic though you can just start the rect shape animation so many seconds after the circle animation starts.

var cx = myCircle.cx.animVal.value;

will give you the animated value if you need it, provided that's the attribute you're animating.

You're using animateMotion rather than animating the cx and cy attributes on their own though. I'm think the only way to get the circle position post that transform is to call getBBox.