3

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.

JoGe
  • 872
  • 10
  • 26
  • 1
    Don't rely on the red rect, I'm not sure where that came from. Thats set separately. The path is inside a group thats rotated/scaled/translated and the rect is not inside the group. If you look at the bbox of the group and the path, you will see they are different as well. I'm not sure thats an issue, just mentioning that may be something to check. – Ian Aug 05 '15 at 11:16
  • I want rotate the gear only but stay on some position. The red rect i painted only to show better, that the gear change his X/Y-position (and that i don't want). If you save the SVG-Code local and open with inkscape or illustrator, you see that the rect and gear ar centered to page an not grouped. – JoGe Aug 05 '15 at 11:39
  • Well it looks to be working ok now, I think you've removed the transform from the group ? – Ian Aug 06 '15 at 12:54
  • yes i found the solution. I will post the answer in few minutes.. – JoGe Aug 06 '15 at 14:20

2 Answers2

2

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.

JoGe
  • 872
  • 10
  • 26
0

Joel except of taking center by using box.cx and box.cy. take center by dividing width and height of container by 2 and then set with it.

Abid Mahmood
  • 1
  • 5
  • Why would that be different? – Robert Longson Aug 05 '15 at 10:14
  • Hmm same result by using half of width and height.. If i print the values out, i've got (firefox) `box.width/2=77.12982648229425 box.height/2=79.57228499999968 box.cx=111.59683051770574 box.cy=945.9807149999995` Why do I have different values even though the gear is square (width = height)? – JoGe Aug 05 '15 at 10:46
  • You may get the wrong result if x and y are non-zero. To do it properly: `cx = box.width/2+box.x;` and `cy = box.height/2+box.y`. – Erik Dahlström Aug 05 '15 at 19:35
  • Thanks Erik for the hint.. that's absolutly correct, but brings no progress to my question. Fact is: box.cx = box.width/2+box.x What could i do for firefox and chrome to get also the right values? – JoGe Aug 06 '15 at 06:40