Rotate SVG via CSS3 anchor not in the middle


I've designed an SVG in illustrator, and got it rotating with CSS3 but its rotating from top left.

Is there anyway I can set the anchor to the center of the shape?

Thank you!

Problem courtesy of: user2979139


Transforms in SVG are around the origin (0,0) and there is no transform-origin in SVG yet, like there is in CSS.

There are ways to fake it but they are not that straightforward: How to set transform origin in SVG

Solution courtesy of:


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.