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

Question

4

我想动画化一个SVG对象，使其沿着我在d3.js中构建的SVG路径移动。有没有简单的方法来实现这一点？特别是，我想获得与我的路径对应的插值坐标。从那里开始，使用tween.js或d3.js本身执行动画将非常容易。

- Greg

2个回答

8

据我所知，在D3中没有简单地获取插值SVG路径的坐标的方法，也就是说，你可能需要自己进行插值。

然而，要在该路径上动画显示一个SVG对象，你不需要使用D3。你可以使用SVG的<animateMotion>元素来实现原生的SVG动画--请参考这里的示例。

- Lars Kotthoff

1

示例链接已下线。提醒一下。 - SleepProgger

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- angus l · Accepted Answer

你可以修改这个例子：http://bl.ocks.org/mbostock/1705868 在这个例子里，一个圆会沿着SVG路径移动，使用SVG的getTotalLength和getPointAtLength方法。你可以用任何SVG对象替换这个圆。