SVG :déplacer des "sprites" via le SMIL

Cette page contient deux fichiers SVG.

On désigne par "sprites" les personnages d'une animation qui se déplacent. Il s'agit souvent de GIF animés.

Dans chacun des deux fichiers SVG des GIF animés sont insérés et déplacer grâce au SMIL.

Premier exemple

Le code de l'image vectorielle

... <svg width="100%" height="auto" viewBox ="0 0 850 240" style = "background : lightgrey ; " ... > <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="700" y="120" /> <desc>Insertion de GIF animés</desc> <image y="175" width = "80" height="60" xlink:href="../images/fondeur.gif"> <animate attributeName="x" values ="0;1000" attributeType ="XML" begin = "0s" dur="20s" repeatCount="indefinite" /> </image> <image y="175" width = "80" height="60" xlink:href="../images/fondeur2.gif"> <animate attributeName="x" values ="0;1000" attributeType ="XML" begin = "0s" dur="18s" repeatCount="indefinite" /> </image> </svg>

Le canevas est d'abord rempli de gris clair via le CSS puis on dessine la neige (rectangle rempli de blanc) et le pâle soleil d'hiver (un cercle jaune flouté).
On clone le groupe "sapin" plusieurs fois (balise use)
Le décor de l'animation est alors réalisé !

On insère ensuite avec la balise image deux gifs animés.
On déplace ces deux images selon un axe horizontal grâce à la balise animate.

Exemple 2

Le code du fichier SVG

... <svg width="100%" height="auto" viewBox ="0 0 500 300" ... style ="background-image :url(../images/fond1.jpg);background-size :cover;" > <image xlink:href ="../images/plongeur4.gif" width ="100" height ="100"> <animate attributeType ="XML" attributeName="x" from ="-50" to ="500" begin="0s" dur="15s" repeatCount="indefinite"/> <animate attributeType ="XML" attributeName="y" from ="-50" to ="300" begin="0s" dur="15s" repeatCount="indefinite"/> </image> </svg>

Le canevas SVG a pour fond une image qui s'adapte aux dimensions de son conteneur grâce à la propriété background-size.
Le conteneur image contient deux fois la balise animate pour déplacer le gif animé sur les axes X et Y.

Insertion des fichiers dans la page

Comme chaque fichier SVG contient des liens vers d'autres images, l'insertion de ces images 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.svg" width ="80%"></object> <object type="image/svg+xml" data="plongeur.svg" width ="50%"></object>
Retour menu