Animation SVG en 3D

Jusqu'à présent nos animations étaient plates.
Dans cette page je vous propose une animation 3D : un jet atterissant sur la piste. Pour donner un effet 3D non seulement l'avion se déplace au dessus de la piste mais en plus il est de plus en plus grand.
Vous allez découvrir que c'est pas très compliqué ...

Actualisez la page pour redémarrer l'animation.

Le code SVG correspondant (extraits)

<svg width ="90%" height ="auto" viewBox ="0 0 900 600" style ="background-image :url(../images/piste.svg); background-size : cover;" > <symbol id ="avion" viewBox ="0 0 300 110"> <line x1="0" y1="70" x2="260" y2="70" stroke="lightgrey" stroke-width ="4" stroke-linecap = 'round'/> <line x1="130" y1="0" x2="130" y2="40" stroke="lightgrey" stroke-width ="2" stroke-linecap = 'round'/> <line x1="80" y1="20" x2="180" y2="20" stroke="lightgrey" stroke-width ="2" stroke-linecap = 'round'/> <circle cx="130" cy ="60" r ="30" fill ="lightgrey" /> <circle cx="130" cy ="65" r ="2" fill ="grey" /> ... <circle cx="180" cy ="90" r ="10" fill ="gray" /> <line x1="100" y1="70" x2="100" y2="100" stroke="lightgrey" stroke-width ="2" /> ... <polygon points ="130,30 155,50 105,50" fill ="black" /> <line x1="130" y1="30" x2="130" y2="50" stroke="lightgrey" stroke-width ="2" /> </symbol> <use xlink:href ="#avion" width ="210" height="70" > <animateMotion begin="0s" dur="20s" fill ="freeze" path ="M-50,100 L400,500" restart ="whenNotActive" /> <animateTransform attributeName="transform" type="scale" values = "0.4;1.4" begin="0s" dur="20s" fill ="freeze" restart ="whenNotActive" /> </use> </svg>

Commentaire

Un canevas a une largeur exprimée en % et a pour fond une image SVG (piste.svg) de mêmes dimensions.
Ne pas oublier la propriété CSS background-size:cover pour que l'image de fond s'adapte en permanence aux dimensions du canevas.
L'image d'arrière plan du canevas SVG est elle-même une image SVG qui a été produite avec Inkscape. Dans cette image j'ai utilisé des dégradés, des flous, etc. Inkscape est le bon outil dans ce contexte car la conception et la saisie du code SVG correspondant aux dégradés et aux filtres aurait été fastidieuse. Donc autant faire appel à une interface graphique qui génère le code ...
Après optimisation (avec l'outil en ligne SVG Editor le poids de l'image d'arrière plan est tombé de 9 à 6 KO.

Pour définir le modèle j'ai utilisé le container symbol qui remplace avantageusement les balises defs, G.

Les deux animations sont simultanées et durent 20 secondes. Elles ne peuvent être interrompues (restart ="whenNotActive") et ne sont exécutées qu'une fois (repeatCount absent) ; l'animation est gelée (fill = "freeze").
Donc pour relancer l'animation il suffit de recharger la page !
Retour menu