SVG - Infinite rotation assumes wrong center point
I made a code with svg binding: Codepen
I am trying to rotate an svg gear in an endless loop around its own center point. This works in Internet Explorer, but does not work in Mozilla-Firefox and Google-Chrome.
The center point in Chrome and Firefox seems to be wrong, so the mechanism goes out of its position.
I used the following code for rotation:
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 do I need to do for Firefox and Chrome to find the right hub? Thanks for your help.
source to share
Found a solution based on @lan's comment.
The transmission was in a group that contains an X / Y transform. So I am trying to delete every group and layer in the svg file. To clearly see the nesting of objects, I work with an XML editor in Inkscape .
Each object must be moved to its original position using a relativ transformation. The use of relativistic motions prevents inkscape from printing translation attributes for groups.
Steps to move a relational object in Inkscape:
- Go to "Edit" → "Select All in All Layers"
- Go to Object -> Transform
In the Transform panel:
-
Uncheck the Relative displacement box and check Apply to each object separately
-
Move object to target position
After clearing the svg file, firefox and chrome also calculate the correct values and the gear spins well now (see the updated code on the knee)
Maybe this is the best solution to tell Inkscape not to work with transform attributes, but I haven't found one yet.
So, if you are working with animated SVG, make sure that there are no unnecessary groups and layers in the file, and keep watching the transformation.
source to share