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.

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

like so