CODEWITHSUNDEEP
cssanimationsvg
Robert Coroianu
Robert Coroianu

Reputation: 426

SVG rotate path

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

Upvotes: 9

Views: 14736

Answers (3)

Tomás Lima
Tomás Lima

Reputation: 323

You can add this tag inside your svg tag to rotate it around it's center:

<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="9s" additive="sum" repeatCount="indefinite" />

Upvotes: 2

Josh Crozier
Josh Crozier

Reputation: 240928

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.

Upvotes: 9

feeela
feeela

Reputation: 29922

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.

Upvotes: 1

Related Questions