Animieren SVG über den Bildschirm kontinuierlich

Question

Ich versuche, ein SVG-Objekt animiert über den Bildschirm wie diese kontinuierlich zu gehen:

http://jsfiddle.net/PPVda/

aber ich kann es nicht arbeiten konnte. Meine Vermutung ist, weil SVG nicht mit CSS .animate arbeitet.

Also versuchte ich stattdessen velocity.js zu verwenden.

Ich habe meine verwalten svg neu zu positionieren mit:

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

und übersetzt es mit:

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

Um ein kontinuierlich zu machen, habe ich diese:

setTimeout(test(), 9000) 

Es ist jedoch nicht kontinuierlich laufen.

Jede Hilfe wäre großartig! Vielen Dank.

Answer 1

Versuchen Sie stattdessen:

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

https://davidwalsh.name/svg-animation

Ich empfehle nicht Rückrufe für Looping mit SVG