Search code examples
javascriptcssanimationsvgsnap.svg

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.

Solution

  • Found solution based on @lan's comment.

    The gear was in a group, which contains a X/Y - transformation. So I try to remove each group and layer in the svg file. To see clearly the nesting of objects, I work with the XML-Editor in Inkscape.

    Each object must be moved to his original position by using relativ-transformation. Using relativ movements prevent inkscape to print out translations attributes to groups.

    Steps to move object relativ in Inkscape:

    1. Go to Edit -> Select All in All Layers
    2. Go to Object -> Transform

    In Transform panel:

    1. Uncheck Relative move and check Apply to each object separately

    2. Move object to target position

    After clean up the svg file, firefox and chrome calculate the right values too and the gear is now rotation well (see updated code on codpen)

    enter image description here

    Maybe it exist a better solution to tell Inkscape not working with transformation-attributes, but i didn't found it yet.

    So if you work with animated SVG, be sure that the file is has no unnecessary groups and layers and keep attentions on transformation.