Rotate SVG via CSS3 anchor not in the middle

Problem

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

Solution

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: bfred.it

Discussion

There is currently no discussion for this recipe.

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