SVG Css Rotation Sticking And Not Rotating About The Center

When hovering an SVG, I want it to rotate the 'container' with its contents not rotating. I tried countering the rotation of the SVG by counter rotating its contents but hit 2 issu

Solution 1:

Its specific of SVG CSS Transformation. You can read about it here.

You need define transform-origin property.

Fix for your case: http://jsfiddle.net/Db2s2/3/

Solution 2:

If you don't want something to rotate then just stick it in a container that doesn't rotate.

I.e. stick another SVG on top as the container and rotate that.

<svg id="foreground" x="0px" y="0px" viewBox="0 0 50 50">
    <rect width="100%" height="100%" fill="none" pointer-events="all">
</svg>

like so