Animer des objets SVG via CSS

Si vous avez lu mon tuto (dans ce même site) sur CSS, vous savez que depuis la version 3 il est possible d'animer des éléments HTML à partir d'un modèle d'animation appelé keyframes. Il suffit ensuite d'appeler ce keyframes via une règle de style basée sur le raccourci animation.

Sachez que ces mêmes outils CSS peuvent s'appliquer à des objets SVG mais avec certaines restrictions ...
Je vous invite à revoir le chapitre à ce sujet dans le tutoriel CSS3 : Animation d'éléments HTML via CSS3

Un exemple basique pour commencer

Thème : un rond devient de plus en plus gros et de plus en plus opaque puis c'est l'inverse.

Première solution envisagée

Le code SVG

<svg width ="50%" viewBox ="-200 -200 400 400" style ="background : yellow" >
	<circle style ="cx : 0 ; cy : 0 ; r : 100; fill : black ;" id ="rond" /> 	 
</svg>

Via les valeurs du viewBox, l'origine du canevas est son centre.
Remarquez que les paramètres géométriques du rond (cx,cy,r) sont passés en propriétés.

Le code CSS

@keyframes animer
{ 
	0% {fill-opacity:0.1; r : 10;}
	50% {fill-opacity :1 ; r: 200 ;}
	100% {fill-opacity:0.1; r : 10; }
}
#rond {animation : animer 20s 0s infinite linear;}

On définit un modèle d'animation : un "keyframes". Dans ce keyframes on modifie les valeurs d'un paramètre de style (fill-opacity) et d'un paramètre géométrique (r).

Le keyframes est ensuite appliqué à différents objets SVG via des règles de style. Ici la règle de style #rond {} est basée sur différentes fonctions du raccourci animation : "name, duration, delay, iteration-count, timing-function". Il pourrait y avoir jusqu'à 8 fonctions (ou huit propriétés CSS préfixées animation-.

Je rappelle que tous les outils d'animation CSS3 peuvent s'appliquer tant à des éléments HTML qu'à des objets SVG.
Lien : animation d'éléments HTML via CSS3

Le code du keyframes 'animer' repose sur la spécification SVG version 2 qui autorise à passer en propriétés non seulement les paramètres de style mais aussi les paramètres géométriques (cx,cy,r,rx,ry,x,y,width, height,etc.).
Dans la règle de style #rond{...}, la propriété transform-origin est devenue inutile puisque l'origine du canevas est déjà son centre. ,

Le rendu

Sous Firefox le canevas reste vide ... par contre le rendu est parfait sous Chrome & Edge.
Firefox reste à la version 1 de SVG ; or selon la norme SVG1 les paramètres géométriques ne peuvent être passés qu'en attributs et jamais en propriétés.

Solution retenue

Cette solution doit être compatible avec tous les navigateurs populaires ; il faut donc mixer SMIL & CSS.

Le code SVG

<svg width ="50%" viewBox ="-200 -200 400 400" style ="background : yellow" >
	<circle cx="0" cy="0" r='10' id ="rond2">
		<animate attributeName="r" values="10;200;10" dur="20s" 
			repeatCount="indefinite" />
	</circle>
</svg>

L'origine du canevas est toujours son centre.
Le paramètre géométrique "r" est modifié via le SMIL tandis que le paramètre de style fill_opacity sera changé via le CSS.

Le CSS

@keyframes animer2
{ 
	0% {fill-opacity:0.1;}
	50% {fill-opacity :1 ;}
	100% {fill-opacity:0.1;}
}
#rond2 {animation : animer2 20s 0s infinite linear;}

Le rendu

Animations basées sur "scale" ou "rotate"

les transformations de type "scale" et "rotate" peuvent s'accompagner aussi d'une translation si certaines précautions ne sont pas prises ...

Rappel

Pour un élément HTML, transform-origin fait référence à l'élément lui-même alors qu'en SVG ce paramètre fait référence à la zone de dessin ("canevas").
Pour un élément HTML, la valeur par défaut de cette propriété est "center center" : centre de l'élément lui-même.
Tandis que pour un élément SVG, l'origine de la transformation est l'origine du canevas et celle-ci est le plus souvent le coin supérieur gauche du canevas (mais pas toujours ...).

Transformation : rotation

Le rendu

Ci-dessous trois carrés qui tournent autour du centre du canevas.

Le code SVG

<svg width="50%" viewBox ="0 0 300 300">
<g id ="groupe">
	<rect x="0" y ="0" width ="100" height ="100"  fill ="olive" />
	<rect x="100" y ="100" width ="100" height ="100"  fill ="red" /> 	
	<rect x="200" y ="200" width ="100" height ="100"  fill ="orange" /> 	
</g>
</svg>

L'origine du canevas est ici son coin supérieur gauche.
Les trois formes sont regroupées dans un groupe identifié "groupe".

Le code CSS

@keyframes pivoter
{
	from {transform : rotate(0deg); }
	to {transform : rotate(360deg); }
}
#groupe {animation : pivoter 12s 0s infinite linear ; transform-origin : 50% 50%; }

Observez bien la règle de style #groupe{ } ; on anime le groupe de formes en appliquant le modèle "pivoter" ; l'origine de la rotation doit être le centre du canevas.

Transformation : changement d'échelle

Le rendu

Le centre du carré rest toujours le centre du canevas.

Le code CSS

@keyframes grossir
{
	from {transform :scale(1); }
	to {transform : scale(3); }
}
#carre {animation : grossir 10s 0s linear infinite alternate ;}

Le code HTML,SVG et JS

<svg width="50%" viewBox ="-200 -200 400 400"> 
	<rect x="-50" y="-50" width="100" height="100" fill = 'grey' id ="carre" >
	</rect>
</svg>
...
<button onclick ="document.getElementById('carre').style.animationPlayState ='paused'; ">Suspendre animation</button>
<button onclick ="document.getElementById('carre').style.animationPlayState ='running';">Reprendre animation</button>

Le canevas a pour origine son centre donc transform-origin : 50% 50% est inutile.
Dans les instructions JS on manipule la propriété animation-play-state qui devient "animationPlayState" en JS).

Animation de texte

Vous pouvez bien sûr animer un élément text de SVG via le CSS.

Le rendu

Le code SVG

<svg ... viewBox ="0 0 900 100" style ="background : linear-gradient(75deg, navy, aqua,white );"> 
	<text   x ='100' y ='60' width = '600' height = '60' >Animer un texte SVG avec CSS !</text>
</svg>

Rappel : la balise SVG étant un élémént HTML on peut lui appliquer un dégradé linéaire défini en CSS.

Le code CSS

    
text{font-family : arial ; font-weight : bold ;	font-size : 60px ;  
text-shadow : 5px 5px 5px grey ;fill : navy; }
@keyframes deplace
	{ 
	0% {transform:translateX(-900px); }
	50%{transform : translateX(0px);}
	100% {transform : translateX(900px);}
	}
text{animation : deplace 10s 0s infinite linear alternate;}

Le texte change de direction à chaque cycle car dans la propriété animation il y a le terme alternate.

Une animation 3D

Ci-dessous un jet qui atterit sur la piste.

Le rendu

Il s'agit d'un document SVG qui compte tenu de la complexité du code est inséré via la balise object.

Le code du fichier "atterrissage.svg"

...
<svg viewBox ="0 0 900 600" 
	xmlns="http://www.w3.org/2000/svg" 	xmlns:xlink="http://www.w3.org/1999/xlink" 
	style ="background-image :url(../images/piste.svg); background-size :cover;" >
<style>
@keyframes animer 
{
	0% {transform : scale(0.1);}
	25% {transform : scale(0.4) ;}
	50% {transform : scale(0.8) ;}
	75% {transform : scale(1) ;}
	90% {transform : scale(1.4) ;} 
	100% {transform : scale(1.5) ;}      
}
#jet {animation : animer 16s 0s infinite linear forwards ;}
</style>       
<defs>
	<g id ="avion" >
		<line x1="0" y1="70" x2="260" y2="70" 
				stroke="lightgrey" stroke-width ="4px"  stroke-linecap =  'round'/>
		<line x1="130" y1="0" x2="130" y2="40" 
				stroke="lightgrey" stroke-width ="2px"  stroke-linecap =  'round'/>
		<line x1="80" y1="20" x2="180" y2="20" 
				stroke="lightgrey" stroke-width ="2px"  stroke-linecap =  'round'/>
		
		<circle cx="130" cy ="60"  r ="30" fill ="lightgrey" />
		<circle cx="130" cy ="65"  r ="2" fill ="grey" />
		
		<circle cx="80" cy ="90"  r ="15" fill ="lightgrey" />
		<circle cx="180" cy ="90"  r ="15" fill ="lightgrey" />
		<circle cx="80" cy ="90"  r ="10" fill ="gray" />
		<circle cx="180" cy ="90"  r ="10" fill ="gray" />
		
		<line x1="100" y1="70" x2="100" y2="100" 
				stroke="lightgrey" stroke-width ="2px" />
		<line x1="160" y1="70" x2="160" y2="100" 
				stroke="lightgrey" stroke-width ="2px" />
		<line x1="110" y1="90" x2="110" y2="110" 
				stroke="darkgrey" stroke-width ="6px" />
		<line x1="150" y1="90" x2="150" y2="110" 
				stroke="darkgrey" stroke-width ="6px" />
		<polygon points ="130,30 155,50 105,50" fill ="black" />
		<line x1="130" y1="30" x2="130" y2="50" 
				stroke="lightgrey" stroke-width ="2px" />
	</g>
</defs>
<use href ="#avion" id ="jet" x ="250" y ="250" />
...

Commentaire

Rappel : dans le cadre d'un fichier SVG (code SVG externe) les espaces de noms ("namespaces") xmlns="http://www.w3.org/2000/svg" & xmlns:xlink="http://www.w3.org/1999/xlink" sont obligatoires.

Le canevas a pour "background" une image vectorielle qui a été produite avec Inkscape : piste.svg.

Le document SVG comprend une feuille de style avec un "keyframes" ; ce modèle d'animation est appliqué à l'objet SVG identifié "jet".
Cet objet "jet" est le clone d'un modèle identifié "avion".
#jet {animation : animer 16s 0s infinite linear forwards ;} : je ne fais pas appel à la propriété transform-origin car je veux que l'agrandissement de l'avion s'accompagne aussi de sa translation. Donc l'origine de la transformation reste le coin supérieur gauche du canevas.

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins vectoriels statiques

Dessins vectoriels animés

Le framework Snap SVG

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Animer des objets SVG via CSS

Un exemple basique pour commencer

Première solution envisagée

Le code SVG

Le code CSS

Le rendu

Solution retenue

Le code SVG

Le CSS

Le rendu

Animations basées sur "scale" ou "rotate"

Rappel

Transformation : rotation

Le rendu

Le code SVG

Le code CSS

Transformation : changement d'échelle

Le rendu

Le code CSS

Le code HTML,SVG et JS

Animation de texte

Le rendu

Le code SVG

Le code CSS

Une animation 3D

Le rendu

Le code du fichier "atterrissage.svg"

Commentaire