SVG rotate path

Question

I'm starting to use SVG and so far it's all okay, but when I try to do some animation with CSS the result isn't what I expect it to be.

I want to rotate a gear like in this Fiddle.

Below is the CSS I used to rotate the elements:

.gear {
    -webkit-animation: rotation 2s infinite linear;
    -moz-animation: rotation 2s infinite linear;
    -o-animation: rotation 2s infinite linear;
    animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to   {-o-transform: rotate(359deg);}
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

Answer 1

Actually it is animated in Chromium at least. Just the center is not correct. (Try to remove the width, height and x/y attributes, while just using the viewBox for the SVG tag.)

In Opera I could get it working, when setting the class "gear" to the SVG element instead of the path:

<svg class="gear" …

You may also have to set the transform-origin.

Answer 2

Set transform-origin to 50% 50% in order to make the svg animation function like the img one:

UPDATED EXAMPLE HERE

.gear {
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
}

It's worth noting that the default/initial value of the transform-origin property is 50% 50% 0.