SVG : déplacer des "sprites" grâce au CSS

Cette page comprend deux images vectorielles animées.
Dans ces deux fichiers SVG le déplacement des "sprites" est géré non pas par JavaScript ou SMIL mais par CSS.
On désigne par "sprites" les personnages d'une animation qui se déplacent. Il s'agit souvent de GIF animés. C'est le cas ici.

Premier exemple

Le code du fichier SVG (extrait)

... <svg width="100%" height="auto" viewBox ="0 0 850 240" style = "background : lightgrey ; " ... <style> @keyframes deplace { 0% {transform : translateX(0px); } 100% {transform : translateX(1000px); } } #fondeur1 {animation : deplace 20s 0s infinite linear;} #fondeur2 {animation : deplace 18s 0s infinite linear;} </style> <desc>Le décor : dessin au format SVG</desc> <rect x = "0" y ="160" width = "850" height = "100" fill = "white" /> <defs> <filter id="flou"> <feGaussianBlur stdDeviation="1" /> </filter> <g id = "sapin" filter = 'url(#flou)'> <polygon points ="55,5 25,75 85,75" fill = "gray"/> <rect x ='50' y = '65' width = '10' height ='40' fill ='gray' /> <polygon points ="50,0 20,70 80,70" fill = "green"/> <rect x ='45' y = '60' width = '10' height ='40' fill ='maroon' /> </g>SVG </defs> <use xlink:href="#sapin" x="0" y="100" /> <use xlink:href="#sapin" x="100" y="120" /> <use xlink:href="#sapin" x="200" y="110" /> <use xlink:href="#sapin" x="300" y="100" /> <use xlink:href="#sapin" x="400" y="120" /> <use xlink:href="#sapin" x="500" y="110" /> <use xlink:href="#sapin" x="600" y="110" /> <use xlink:href="#sapin" x="700" y="120" /> <desc>Insertion de GIF animés</desc> <image x="0" y ="175" width = "80" height="60" xlink:href="../images/fondeur.gif" id ="fondeur1"></image> <image x="100" y ="175" width = "80" height="60" xlink:href="../images/fondeur2.gif" id ="fondeur2"></image> </svg>

Le fichier SVG comprend une feuille de style interne comprenant un modèle d'animation. Ce modèle d'animation est ensuite appliqué à deux objets SVG (images GIF animées insérées en tant qu'objets SVG grâce à la balise image).

Exemple 2

Le code du fichier SVG (extrait)

... <svg width="100%" height="auto" viewBox ="0 0 500 300" ... style ="background-image :url(../images/fond1.jpg);background-size :cover;" > <style> @keyframes deplace { 0% {transform : translate(0px,0px); } 100% {transform : translate(450px,250px); } } #plongeur {animation : deplace 15s 0s infinite linear;} </style> <image xlink:href ="../images/plongeur4.gif" width ="100" height ="100" id ="plongeur"></image> </svg>

Là aussi le fichier SVG contient une feuille de style interne contenant un modèle d'animation qui ensuite appliqué à un objet SVG.

Insertion des animations SVG dans une page web

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

<object type="image/svg+xml" data="fondeurs_css.svg" width ="80%"></object> <object type="image/svg+xml" data="plongeur_css.svg" width ="50%"></object>
Retour menu