snap.svg无限旋转

Question

SVG元素可以无限旋转吗？

Snap提供了旋转一定量的方法，但是如何使它无限旋转呢？

Answer 1

正如Alvin和Monkeyinsight所说，有几种不同的方法可以执行此操作，您可以使用CSS进行操作，也可以使用SVG标记进行操作。 我猜您不希望使用SVG标记，因为这可能就是为什么您首先使用Snap的原因（尽管您始终可以将element.parse（作为中间阶段）

作为一种替代方案，有时您需要组合更复杂的位，我将展示如何在Snap中使用回调执行无限动画...

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 );

它在完成动画时有一个简单的回调，因此可以用于更复杂的功能。

的jsfiddle

我怀疑CSS / SVG标记解决方案会更高效，但与其他Snap东西相比可能灵活性较低。

编辑：如果确实要长时间运行，则可能需要注意内存。