SVG & CSS : déplacer des 'sprites'

Cette page comprend deux fichiers SVG avec animation.
Dans ces deux animations le déplacement des "sprites" est géré non pas par JavaScript ou SMIL mais par CSS. !
La propriété position n'est pas disponible pour une zone de dessin SVG donc pour assurer un déplacement des GIF il faut effectuer une translation !

Exemple 1 : les fondeurs

Le code du fichier SVG (extraits)

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"
Le déplacement est effectué par une translation.

Deuxième exemple : les cyclistes

Le code du fichier SVG (extrait)

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 :
Retour menu