移动的SVG对象沿一条线或一个路径 [英] Move an SVG object along a line or a path

问题描述

我想一个动画SVG对象，以便它遵循我已经从d3.js.线发生器内置了SVG路径有没有简单的方法来实现这一目标？我特别想获得对应于我的道路内插坐标。从那里，它会很容易使用tween.js进行动画或d3.js本身。

I'd like to animate an SVG object so that it follows a SVG path that I have built from a line generator in d3.js. Is there any easy way to achieve this? In particular, I'd like to obtain the interpolated coordinates that correspond to my path. From there, it would be easy to perform the animation using tween.js or d3.js itself.

推荐答案

据我所知，有没有办法轻易获得D3的插值SVG路径的坐标，也就是你可能要自己做插值。

As far as I know, there's no way to easily get the coordinates of an interpolated SVG path in D3, i.e. you might have to do the interpolation yourself.

要动画沿着这条道路的SVG对象，你不需要但是使用D3。你可以使用SVG ＆LT; animateMotion＆GT; 元素让本机SVG动画 - 见here 一个例子。

To animate an SVG object along that path, you don't need to use D3 however. You can use the SVG <animateMotion> element to get a native SVG animation -- see here for an example.

这篇关于移动的SVG对象沿一条线或一个路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！