SVG tourner chemin

Je commence à utiliser SVG et pour l'instant tout est ok, mais lorsque je tente de faire un peu d'animation avec CSS, le résultat n'est pas ce que j'attends d'elle.

Que je veux faire tourner une roue d'engrenage, comme dans ce Violon.

Ci-dessous est le CSS que j'ai utilisé pour faire pivoter les éléments:

.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);}
}
Quel est exactement votre question?
Je veux faire tourner des engins de svg comme des engins de img @JoshC

OriginalL'auteur Robert Coroianu | 2014-01-28

  1. 8

    Ensemble transform-origin à 50% 50% afin de rendre le svg la fonction d'animation comme le img:

    mise à JOUR de l'EXEMPLE ICI

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

    Il est intéressant de noter que la valeur par défaut de la transform-origin propriété est 50% 50% 0.

    Voir w3.org/TR/css-transforms-1/#transform-origin-property (la raison pourquoi transformer l'origine n'est pas 50% 50% en svg par défaut est parce que transform n'était pas un bien en SVG 1.1. Elle allait se briser beaucoup de existante contenu svg, à moins que le transform-origin par défaut a été 0 0).
    Il convient de noter, ce n'est pas cohérente entre Chrome et Firefox. Dans FF, le centre de rotation est toujours en haut à gauche de la toile.
    Semble être brisé maintenant: 50% est calculé à partir de l'ensemble de svg, et pas seulement ce chemin. Toutes les mises à jour sur ce point?

    OriginalL'auteur Josh Crozier

  2. 1

    En fait il est animé en Chrome au moins. Seulement le centre n'est pas correct. (Essayer d'enlever la largeur, la hauteur et x/y, les attributs, tout en utilisant seulement la viewBox pour la balise SVG.)

    À l'Opéra, j'ai pu obtenir ce travail, lors de la définition de la catégorie "équipement" pour l'élément SVG au lieu du chemin:

    <svg class="gear" …

    Vous pouvez également définir l'option transform-origin.

    OriginalL'auteur feeela