Animer un SVG avec CSS et SMIL

Les attributs de présentation SVG (remplissage, contour, opacité, transformation) peuvent être animés avec des transitions CSS. Ajoutez une classe et définissez la transition : .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. Les transitions CSS fonctionnent de la même manière sur les éléments SVG.

Appliquez @keyframes aux éléments SVG : animez le décalage des tirets du contour pour créer un effet de tracé, l’opacité pour une apparition en fondu, et la transformation pour les déplacements et les rotations. La même syntaxe d’animation que celle utilisée pour les éléments HTML s’applique aux éléments SVG sans modification.

La technique du motif de tirets du contour et de son décalage simule le dessin d’un tracé : définissez le motif de tirets sur la longueur du tracé, définissez le décalage initial sur cette longueur (le tracé est invisible), puis animez le décalage jusqu’à 0. Le contour semble ainsi se dessiner du début à la fin.

path.getTotalLength() renvoie la longueur du tracé dans les unités utilisateur SVG. Utilisez cette valeur à la fois pour le motif de tirets du contour et pour son décalage initial. L’animation fonctionnera ainsi correctement, quelle que soit la complexité ou la longueur du tracé.

Les navigateurs modernes prennent en charge les transformations CSS sur les éléments SVG. Par défaut, l’origine de la transformation se trouve dans le coin supérieur gauche du SVG pour les éléments SVG, et non au centre comme pour HTML. Définissez la boîte de transformation sur la boîte de remplissage pour que l’origine de la transformation soit relative à la boîte englobante de l’élément.

SMIL (Synchronized Multimedia Integration Language) est le système d’animation intégré de SVG. L’élément d’animation modifie les valeurs d’attributs au fil du temps. SMIL ne nécessite ni JavaScript ni CSS : les animations sont entièrement déclaratives dans le balisage SVG.

<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"> fait pivoter un élément autour d’un centre donné en utilisant la syntaxe SMIL.

<animateMotion> déplace un élément le long d’un tracé SVG. Référencez un tracé avec mpath ou intégrez les données du tracé directement. L’élément suit automatiquement la courbe du tracé, ce qui est utile pour les trajectoires complexes sans calcul manuel des coordonnées.

Animations CSS : prises en charge par tous les navigateurs modernes, intégrées à la cascade CSS et plus faciles à contrôler avec JavaScript (pause, inversion). SMIL : autonome dans le balisage SVG, fonctionne dans les fichiers SVG statiques sans accès à CSS, et offre une syntaxe déclarative et expressive pour les animations suivant un tracé.

Animez l’interpolation entre deux formes de tracé : les tracés doivent comporter le même nombre de commandes et avoir une structure compatible. L’animation CSS anime la propriété de tracé d (Chrome 88+, Firefox 72+) : @keyframes { to { d: path("M...") } } permet une interpolation native des tracés avec CSS.

Ajoutez la requête média prefers-reduced-motion pour désactiver ou simplifier les animations SVG destinées aux utilisateurs que les mouvements incommodent. Les animations décoratives doivent être entièrement désactivées ; les animations porteuses de sens, comme les états de chargement, doivent être simplifiées plutôt qu’arrêtées.

Comment la technique du motif de tirets du contour et de son décalage crée-t-elle une animation de dessin de tracé ?

Les animations SVG utilisent les transitions CSS et les images clés pour les effets fondés sur des propriétés, la technique du motif de tirets et de son décalage pour dessiner des tracés, ainsi que les éléments SMIL animate, animateTransform et animateMotion pour les animations déclaratives intégrées au SVG. prefers-reduced-motion contribue à l’accessibilité. CSS et SMIL sont complémentaires : choisissez selon que le SVG doit s’intégrer à la cascade CSS ou rester portable dans un fichier autonome.