SVG rotate path

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.