SVG rotate path

animation, css, svg

Solution

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`.

Problem

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);} } ```

Original source