animation - 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

您也许可以修改此示例：http ://bl.ocks.org/mbostock/1705868

在这种情况下，使用 SVG 的 getTotalLength 和 getPointAtLength 沿 SVG 路径平移一个圆。您应该能够用任何 SVG 对象替换圆圈。

Answer 2

据我所知，没有办法在 D3 中轻松获得插值 SVG 路径的坐标，即您可能必须自己进行插值。

但是，要沿该路径为 SVG 对象设置动画，您不需要使用 D3。您可以使用 SVG<animateMotion>元素来获得原生 SVG 动画——请参见此处的示例。