Move an SVG object along a line or a path

Question

I'd like to animate an SVG object so that it follows a SVG path that I have built from a line generator in d3.js. Is there any easy way to achieve this? In particular, I'd like to obtain the interpolated coordinates that correspond to my path. From there, it would be easy to perform the animation using tween.js or d3.js itself.

Answer 1

You may be able to modify this example: http://bl.ocks.org/mbostock/1705868

In this case, a circle is translated along an SVG path using SVG's getTotalLength and getPointAtLength. You should be able to replace the circle with any SVG object.