SVG & CSS : animation 3D

Maintenant que les propriétés CSS transform, transition, animation sont bien implémentées ; rien n'interdit d'animer un objet SVG en CSS avec un "keyframes" (modèle d'animation) !

L'animation 3D

Ci-dessous un jet qui atterit sur la piste.

L'animation 3D SVG & CSS correspond à un fichier SVG. Je vous communique le code de ce fichier ci-dessous.

Le code du fichier "atterisage.svg"

Commentaire

Rappel : dans le cadre d'un code SVG externe (fichier SVG) les "namespaces" xmlns="http://www.w3.org/2000/svg" & xmlns:xlink="http://www.w3.org/1999/xlink" sont obligatoires. Codez un document SVG sans ces "namespaces" et demandez une exécution avec un navigateur vous verrez ...

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".
Un autre clone pour représenter un avion sur le tarmac.

Notez que le modèle d'animation repose sur la propriété transform avec ici la fonction scale() qui provoque de facto une translation puisque le point d'origine de la transformation dans un canevas SVG est le coin haut gauche du canevas !
Retour menu