mercredi 5 août 2015

SVG - Endless rotation takes wrong center point


I made a codepen with snap svg: Codepen

I try to rotate a svg-gear in an endless-loop around his own centerpoint. This works on Internet Explorer, but fails on Mozilla-Firefox and Google-Chrome.

The center point in Chrome and Firefox seems wrong and so the gear move out of his position.

enter image description here

For the rotation i used following code:

function infRotate(el, time, cw) {
        var box = el.getBBox();
        el.transform('r0,' + box.cx + ',' + box.cy);
        if (cw)
            el.animate({transform: 'r360,' + box.cx + ', ' + box.cy}, time, mina.linear, infRotate.bind(null, el, time, cw));
        else
            el.animate({transform: 'r-360,' + box.cx + ', ' + box.cy}, time, mina.linear, infRotate.bind(null, el, time, cw));
    }

What i have to do for Firefox and Chrome to find right center point? Thanks for your help.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire