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.

Exemple 1 : les fondeurs

Le code du fichier SVG (extraits)

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="auto" viewBox ="0 0 850 240" style = "background : lightgrey ; " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <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> </defs> <use xlink:href="#sapin" x="0" y="100" /> <use xlink:href="#sapin" x="100" y="120" /> ... <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>

J'ai tapé le code SVG et CSS de A à Z !

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 matricielles insérées avec les instructions image).
Pour que l'instruction image (lien vers d'autres images) soit interprétée il faut rajouter dans la balise SVG le "namespace" xmlns:xlink="http://www.w3.org/1999/xlink"

Deuxième exemple : les cyclistes

Le code du fichier SVG (extrait)

<?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com" xmlns:xlink="http://www.w3.org/1999/xlink"> <style> @keyframes deplace { 0% {transform : translateX(800px); } 100% {transform : translateX(-60px); } } #cycliste1 {animation : deplace 15s 1s infinite linear;} #cycliste2 {animation : deplace 20s 1s infinite linear;} </style> <defs> <bx:grid x="0" y="0" width="100" height="100"/> <filter id="flou"> <feGaussianBlur stdDeviation="2" /> </filter> </defs> <rect y="1" width="800" height="333" style="fill-opacity: 0.4; fill: rgb(152, 220, 239);" filter="url(#flou)" /> <rect y="334" width="800" height="166" style="fill: rgb(114, 109, 109);" filter="url(#flou)" /> <rect y="334" width="800" height="53" style="fill: rgb(55, 225, 70);" filter="url(#flou)" /> <rect x="0" y="437" width="800" height="6" style="fill: rgb(245, 234, 115);" filter="url(#flou)"/> <g filter="url(#flou)"> <ellipse style="fill: rgb(255, 255, 255);" cx="279" cy="83" rx="148" ry="43"/> <ellipse style="fill: rgb(255, 255, 255);" cx="512" cy="49" rx="143" ry="30"/> </g> <desc>arbres</desc> <g transform="matrix(1.1261, 0, -0.00688, 1.11564, 113.61607, -34.63032)" filter="url(#flou)"> <ellipse style="fill: rgb(19, 229, 19);" cx="201" cy="180" rx="26" ry="79"/> <rect x="196" y="259" width="11" height="83" style="fill: rgb(159, 55, 14);"/> </g> <g transform="matrix(1.1261, 0, 0, 1.10802, 483.35812, -32.02557)" filter="url(#flou)"> <ellipse style="fill: rgb(19, 229, 19);" cx="201" cy="180" rx="26" ry="79"/> <rect x="196" y="259" width="11" height="83" style="fill: rgb(159, 55, 14);"/> </g> <g transform="matrix(1.1261, 0, 0, 1.11564, 398.93243, -34.63029)" filter="url(#flou)"> <ellipse style="fill: rgb(19, 229, 19);" cx="201" cy="180" rx="26" ry="79"/> <rect x="196" y="259" width="11" height="83" style="fill: rgb(159, 55, 14);"/> </g> <g transform="matrix(1.1261, 0, 0, 1.05442, -101.06808, -13.69294)" filter="url(#flou)"> <ellipse style="fill: rgb(19, 229, 19);" cx="201" cy="180" rx="26" ry="79"/> <rect x="196" y="259" width="11" height="83" style="fill: rgb(159, 55, 14);"/> </g> ... <desc>GIF animes inseres dans zone de dessin</desc> <image y="350" width = "60" height ="60" xlink:href="../images/cycliste1.gif" id ="cycliste1" /> <image y="350" width = "60" height ="60" xlink:href="../images/cycliste2.gif" id ="cycliste2" /> </svg>

Pour créer cette animation j'ai d'abord utilisé l'application en ligne Boxy SVG pour dessiner, ciel, arbres, route,etc.

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="road_css.svg" width ="80%"></object> <object type="image/svg+xml" data="plongeur_css.svg" width ="50%"></object>
Retour menu