Rotate SVG

Question

I am starting to use SVG, and so far everything is fine, but when I try to make an animation with CSS, the result is not what I expect.

I want to rotate the six, as in this script .

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

Set transform-originto 50% 50%to make an animation function svglike img:

UPDATED EXAMPLE HERE

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

It is worth noting that the default value / initial value of the property transform-originis equal 50% 50% 0.

Answer 2

, , Chromium. . ( width, height x/y, viewBox SVG.)

Opera , "" SVG :

<svg class="gear" …

transform-origin.