Center rotation svg group

[shubhra 2 Likes (Newbie)]

I want to continuously rotate a group inside the svg. I am applying svgOrigin to the tween, but the group is still not centred while rotating. Also, how do we calculate svgOrigin?

See the Pen EKXWrJ by shubhra (@shubhra) on CodePen

[Diaco 1,948 Likes (Superhero)]

you can simply use circle cx/cy as svgOrigin reference , so your group center is : svgOrigin: ' 389.74  420.437 '

[shubhra 2 Likes (Newbie)]

That did it. Thanks a ton!

 

For my understanding, say there was no circle, how do we center the group then? Also, how do we calculate svgOrigin usually?

[OSUblake 9,990 Likes (Superhero)]

Just find the center of whatever you are targeting. So it's own center is...

var bbox = $("#leaves")[0].getBBox();
var cx = bbox.x + bbox.width  / 2;
var cy = bbox.y + bbox.height / 2;

[shubhra 2 Likes (Newbie)]

Thanks Blake!