Accueil

Traduction

Dessiner avec SVG - sommaire

Sommaire partiellement masqué - faites défiler !

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

SVG & CSS : animer un canevas SVG via le CSS

Si vous avez lu mon tuto (dans ce même site) sur CSS, vous savez que depuis la version 3 il est possible d'animer des éléments HTML.
Sachez que vous pouvez aussi animer des éléments d'un canevas SVG clairement identifiés !

Un exemple basique pour commencer

Thème : un rond devient de plus en plus gros et de plus en plus opaque puis c'est l'inverse.
Il change aussi de couleur en passant du rouge au vert.

Solution envisagée

Le code SVG :

Le code CSS gère toute l'animation.

À chaque étape du "keyframes", je change l'opacité, la valeur du rayon, la couleur de fond.
Ce code fonctionnera lorsque la version 2 de SVG sera implémentée.
Il fonctionne déjà avec Chrome qui a implémenté partiellement SVG 2 ! Mais pour le moment, sous Firefox, la taille du cercle ne changera pas !
Rappel : dans le cadre du SVG 1, les paramètres géométriques (r,cx,cy,rx, ry, width, height,etc.) doivent être passés en attributs (jamais en propriétés) ! Donc on ne peut pas encore manipuler ces paramètres dans un "keyframes" (modèle d'animation écrit en CSS).

Solution retenue

Comme seul Chrome comprend le code ci-dessus, je ne peux retenir cette solution pour le moment.
La bonne solution consiste à mixer animation CSS et SMIL.

Le code SVG doit gérer la variation du rayon

Notez la balise animate à l'intérieur du conteneur circle pour animer cette forme.

Le CSS

Les paramètres "r" ont disparu ! Le "keyframes" se contente de modifier les propriétés de mise en forme : opacité et couleur de fond.

Solution alernative

J'aurai pu animere uniquement via CSS en utilisant la propriété transform avec la commande scale.
C'est cette solution que je vais évoquer dans le paragraphe suivant mais avec d'autres thèmes.

Animation CSS basée sur "transform:scale" ou "transform:rotate"

Attention aux transformations de type "scale" ou "rotate" dans le cadre d'un canevas SVG qui peuvent s'accompagner aussi d'une translation si certaines précautions ne sont pas prises ...

Ci-dessous variation automatique de la taille d'un triangle

Le code SVG correspondant

Le code CSS correspondant

Attention !

Pour un élément SVG le point d'origine d'une transformation est le coin haut gauche du canevas. Dans ce contexte, tout changement d'échelle s'accompagne aussi d'une translation.
Donc si vous ne voulez qu'un simple changement de taille de l'objet il faut utiliser la propriété transform-origin avec comme valeur "center center" OU "50% 50%".

La problématique est identique avec une rotation

Si vous voulez que l’élément SVG pivote autour de son centre plutôt qu’à partir du coin supérieur gauche du canevas il faut aussi utiliser transform-origin : center center

Ci-dessous deux carrés : le premier pivote a partir du coin supérieur gauche du canevas et le second pivote autour de son centre.
La rotation est de 45°.

Le code SVG :

Le code CSS :

Animation de texte

Animer un texte SVG avec CSS !

Le code SVG

Le code CSS

La balise SVG étant un élémént HTML, on peut lui appliquer un dégradé linéaire CSS.

Le texte change de direction à chaque cycle car dans la propriété animation il y a le paramètre alternate.

Déplacer des 'sprites' dans le canevas SVG

Le code du fichier SVG (extrait)

Regardez attentivement le code de la balise SVG début !
Ce code original a été généré par le logiciel Boxy SVG : éditeur en ligne de SVG proposé par Google.

Pour créer cette animation SVG, j'ai donc d'abord utilisé l'application Boxy SVG pour dessiner, ciel, arbres, route,etc.

Insertion des animations SVG dans une page web

Attention comme le fichier SVG contient des liens vers d'autres images, l'insertion dans la page de cette animation ne peut se faire qu'avec la balise object. J'ai donc écrit dans cette page web le code suivant :

Une animation 3D

Ci-dessous un jet qui atterit sur la piste.

L'animation 3D correspond à un fichier SVG. Je vous communique le code de ce fichier ci-dessous.
Ce fichier SVG comprend non seulement du SVG mais aussi du CSS.

Le code du fichier "atterisage.svg"

Commentaire

Rappel : dans le cadre d'un fichier SVG (code SVG externe) les espaces de noms '"namespaces") xmlns="http://www.w3.org/2000/svg" & xmlns:xlink="http://www.w3.org/1999/xlink" sont obligatoires.

Le canevas SVG a pour "background" une image vectorielle qui a été produite avec Inkscape (piste.svg).

Le document SVG comprend une feuille de style avec un "keyframes" ; ce modèle d'animation est appliqué à l'objet SVG identifié "jet".
Cet objet "jet" est le clone d'un modèle défini et identifié "avion".

Insertion de l'image vectorielle animée dans cette page

Pour les mêmes raisons que l'exemple précédent, la balise IMG ne convient pas ; il faut utiliser la balise OBJECT pour insérer le fichier SVG dans la page.

L'affichage "responsive" de l'image vectorialle assurée par le code ci-dessus via la classe "grand".