沿线或路径移动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动画 - 请参阅此处以获取示例.