在屏幕上连续设置SVG动画

Question

我正在尝试为SVG对象设置动画，使其连续地穿过屏幕，如下所示：

http://jsfiddle.net/PPVda/

然而，我没能让它发挥作用。我的猜测是因为SVG不适用于CSS.animate.

所以我试着使用velocity.js。

我已经设法重新定位我的svg使用：

$.Velocity.hook($("#39aa995f-2ba5-4316-9c79-ef5b3d58d63d")[0], "translateX", "-300px")；

并使用进行翻译

$("#39aa995f-2ba5-4316-9c79-ef5b3d58d63d").velocity({
    translateX: 4000,
  }, 9000);

为了使它持续，我使用了这个：

setTimeout(test(), 9000)

然而，它并不是连续运行的。

任何帮助都会很棒！非常感谢。

Answer 1

试试这个：

$("#39aa995f-2ba5-4316-9c79-ef5b3d58d63d").velocity({
  translateX: [4000, -600],
},{
  duration: 9000,
  easing: "lnear",
 delay: 0
});

https://davidwalsh.name/svg-animation

我不建议使用回调与SVG的进行循环