SVG & SMIL: une animation 3D

Rendu de l'animation

Actualisez la page pour redémarrer l'animation !

Le code SVG correspondant

<svg width ="100%" height ="auto" style ="background-image :url(../images/piste.svg); background-size :cover" viewBox ="0 0 900 600"> <image xlink:href ="../images/avion.png" width ="260" height ="110"> <animateMotion begin="0s" dur="20s" fill ="freeze" path ="M10,10 l400,400" restart ="whenNotActive"/> <animateTransform attributeName="transform" type="scale" values = "0.1;0.5;1;1.2" begin="0s" dur="20s" fill ="freeze" restart ="whenNotActive"/> </image> </svg>

Le canevas SVG a pour fond l'image SVG "piste.svg".
Le 'sprite' (avion.png) est insérée dans le canevas.
Ces deux images ont été produites à partir d'Inkscape (une image produite avec ce logiciel peut être exportée au format PNG).
Le "sprite" fait l'objet de deux transformations : translation le long d'un chemin et changement d'échelle.

Si vous ne comprenez pas le code SVG ci-dessous visitez le tutoriel "animations avec SVG" et plus précisément la partie "SMIL".
Retour menu