CODEWITHSUNDEEP
javascriptjquerycsssvgsnap.svg
TomasR
TomasR

Reputation: 45

Infinite rotation with snap.svg

Is there a way for a svg element to be rotating infinitely?

Snap offers a way to rotate by a certain amount, but how can I make to rotate infinitely?

Upvotes: 0

Views: 3360

Answers (1)

Ian
Ian

Reputation: 13842

There's a few different ways to do this, As Alvin and Monkeyinsight say, you can do it with CSS, and also as mentioned do it with SVG markup. I'm guessing you don't want SVG markup as thats probably why you are using Snap in the first place (although you could always element.parse( as an inbetween stage maybe)

Just as an alternative, as sometimes you need to combine more complex bits, I'll show how to do an infinite animation in Snap with a callback...

var s = Snap("#svg");

var block = s.rect(100, 100, 100, 100);

function infRotate( el ) {
    el.transform('r0,150,150'); // some kind of transform reset, or removing the previous completed transform maybe needed.
    el.animate({ transform: 'r360,150,150' }, 2000, mina.linear, infRotate.bind( null, el));
};

infRotate( block );

This has a simple callback on the completion of an animation, so this could be used for more complex functions.

jsfiddle

I suspect the CSS/SVG markup solutions would be more efficient, but possibly less flexible with other Snap stuff.

Edit: You may want to keep an eye on memory if this would be in a situation where it really would be running for a long time.

Upvotes: 4

Related Questions