沿线或路径移动SVG对象

Question

我想为SVG对象设置动画，使其遵循我从d3.js中的行生成器构建的SVG路径。有没有简单的方法来实现这一目标？特别是，我想获得与我的路径相对应的插值坐标。从那里，使用tween.js或d3.js本身很容易执行动画。

Answer 1

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

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

Answer 2

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

要沿该路径为SVG对象设置动画，您不需要使用D3。您可以使用SVG <animateMotion>元素来获取原生SVG动画 - 有关示例，请参阅here。