Je commence à utiliser svg et jusqu'à présent, tout va bien, mais quand j'essaie de faire une animation avec CSS, le résultat n'est pas ce que je m'attends à ce que ce soit.
Je veux faire pivoter un équipement comme dans ce violon .
ci-dessous est le CSS que j'ai utilisé pour faire pivoter les éléments: < / p>
3 Réponses :
En réalité, il est animé en chrome au moins. Juste le centre n'est pas correct. (Essayez d'éliminer les attributs de largeur, de hauteur et de x / y, tout en utilisant simplement la zone de vue pour la balise SVG.)
dans l'opéra, je pourrais le faire fonctionner, lors de la définition de la classe "Gear" à l'élément SVG au lieu de Chemin:
Ensemble Exemple mis à jour ici strong> P> Transform-Origine Code> à 50% 50% code> Pour effectuer la fonction svg code> de la fonction d'animation code> IMG code> One: .gear {
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
}
Voir w3.org/tr/css-transforms-1/ # Transform-Origin-Property (la raison pour laquelle Transform-Origine n'est pas 50% 50% dans SVG par défaut est parce que transformer n'était pas une propriété dans SVG 1.1. Cela briserait beaucoup de contenu SVG existant à moins que l'origine Transform-Origine était 0 0 ).
Il convient de noter que cela n'est pas cohérent entre Chrome et Firefox. En FF, le centre de rotation est toujours en haut à gauche de la toile.
Semble être brisé maintenant: 50% est calculé à partir de l'ensemble du SVG, pas seulement de ce chemin. Des mises à jour à ce sujet?
Vous pouvez ajouter cette balise à l'intérieur de votre balise code> SVG code> pour le faire pivoter autour de son centre:
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="9s" additive="sum" repeatCount="indefinite" />
Quelle est exactement votre question?
Je veux faire pivoter les équipements de SVG comme Gear de img @joshc