沿直线或路径移动 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 了解示例。