Animation SVG 3D avec CSS

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"

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width ="90%" height ="auto" viewBox ="0 0 900 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style ="background-image :url(../images/piste.svg); background-size :cover;" > <style> @keyframes animer { 0% {transform : scale(0.1);} 25% {transform : scale(0.4) ;} 50% {transform : scale(0.8) ;} 75% {transform : scale(1) ;} 90% {transform : scale(1.4) ;} 100% {transform : scale(1.5) ;} } #jet {animation : animer 16s 0s infinite linear forwards ;} </style> <defs> <g id ="avion" > <line x1="0" y1="70" x2="260" y2="70" stroke="lightgrey" stroke-width ="4px" stroke-linecap = 'round'/> <line x1="130" y1="0" x2="130" y2="40" stroke="lightgrey" stroke-width ="2px" stroke-linecap = 'round'/> <line x1="80" y1="20" x2="180" y2="20" stroke="lightgrey" stroke-width ="2px" stroke-linecap = 'round'/> <circle cx="130" cy ="60" r ="30" fill ="lightgrey" /> <circle cx="130" cy ="65" r ="2" fill ="grey" /> <circle cx="80" cy ="90" r ="15" fill ="lightgrey" /> <circle cx="180" cy ="90" r ="15" fill ="lightgrey" /> <circle cx="80" cy ="90" r ="10" fill ="gray" /> <circle cx="180" cy ="90" r ="10" fill ="gray" /> <line x1="100" y1="70" x2="100" y2="100" stroke="lightgrey" stroke-width ="2px" /> <line x1="160" y1="70" x2="160" y2="100" stroke="lightgrey" stroke-width ="2px" /> <line x1="110" y1="90" x2="110" y2="110" stroke="darkgrey" stroke-width ="6px" /> <line x1="150" y1="90" x2="150" y2="110" stroke="darkgrey" stroke-width ="6px" /> <polygon points ="130,30 155,50 105,50" fill ="black" /> <line x1="130" y1="30" x2="130" y2="50" stroke="lightgrey" stroke-width ="2px" /> </g> </defs> <use xlink:href ="#avion" x ="750" y ="450" /> <use xlink:href ="#avion" id ="jet" x ="250" y ="250" /> </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