沿着一条线或一条路径移动一个SVG对象

Question

我想动画一个SVG对象，以便它遵循我从d3.js中的线条生成器构建的SVG路径。有没有简单的方法来实现这一点？特别是，我想获得对应于我的路径的插值坐标。从那里，使用tween.js或d3.js本身很容易执行动画。

Answer 1

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

要沿着该路径动画一个SVG对象，您不需要使用D3。您可以使用SVG <animateMotion>元素来获取本机SVG动画 - 例如，请参阅here。

Answer 2

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

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