Animation d'objets SVG avec CSS : pièges à éviter

Après s'être habitué à animer des objets HTML via CSS on peut être tenté d'intégrer dans un "keyframes" destiné à s'appliquer à un objet SVG des propriétés de style telles box-shadow, background, top, left et d'autres.
Or ces propriétés CSS ne sont pas reconnues par le format SVG !

Reprenons le thème de la boule de billard qui rebondit à l'infini sur les bords de ce dernier.

Le code SVG

<svg viewBox ="0 0 800 200" width="80%" height ="auto" style = 'background : yellow ;'> <circle cx="10" cy="190" r="10" fill ="red" id ="rond" /> </svg>

On ne peut plus simple ...

Si on veut que la boule soit ombrée il faut utiliser les filtres SVG !

Le code CSS

Première solution envisagée

@keyframes deplace
	{ 
		0% {}
		25% {left :200px ; top : 10px; }
		50% {left :400px ; top:190px;}
		75% {left :600px ; top:10px; }
		100% {left :800px ; top:190px;}
	}
#rond{animation : deplace 10s 0s infinite linear alternate;}

Cette solution est valide pour déplacer un objet HTML (positionné en relatif ou en absolu dans une boîte HTML).
Mais les notions de positionnement absolu,relatif sont inconnues du format SVG donc ici ça ne marche pas !!!

Deuxième solution

@keyframes deplace
	{ 
		0% {}
		25% {cx :200px ; cy:10px; }
		50% {cx :400px ; cy:190px;}
		75% {cx :600px ; cy:10px; }
		100% {cx :800px ; cy:190px;}
	}
#rond{animation : deplace 10s 0s infinite linear alternate;}

Cette solution "marche" avec Chrome mais pas avec Firefox !
En effet les paramètres cx,cy ne sont pas des propriétés (de style) mais des attributs (de balise).

La bonne solution

@keyframes deplace
	{ 
		0% {}
		25% {transform :translate(200px,-190px);}
		50% {transform :translate(400px,0px);}
		75% {transform :translate(600px,-190px);  }
		100% {transform :translate(790px,0px); }
	}
#rond{animation : deplace 10s 0s infinite linear alternate;}

Cette solution fonctionne avec Chrome et avec Firefox. Quant à IE (ou Edge) je n'en parle pas ...

Attention dans un canevas SVG je rappelle que l'origine par défaut d'une transformation est le point haut gauche.
Il faut donc exprimer les translations par rapport à ce point !
Retour menu