SVG & CSS : animer un canevas SVG via le 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.
Sachez que vous pouvez aussi animer des éléments d'un canevas SVG clairement identifiés !

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.
Il change aussi de couleur en passant du rouge au vert. <svg width ="50%" viewBox ="0 0 400 400" style ="background : yellow" > <circle cx="200" cy="200" r='10' id ="rond" /> </svg>

On ne peut plus simple.

Le code CSS

Première solution envisagée

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

À chaque étape du "keyframes", je change l'opacité, la valeur du rayon, la couleur de fond.

Ce code fonctionnera lorsque la version 2 de SVG sera implémentée.
Il fonctionne déjà avec Chrome qui a implémenté partiellement SVG 2 !
Mais pour le moment, sous Firefox, la taille du cercle ne changera pas !
Dans le cadre du SVG 1, les paramètres géométriques (r,cx,cy,rx, ry, width, height,etc.) doivent être passés en attributs (jamais en propriétés) ! Donc on ne peut pas encore manipuler ces paramètres dans un "keyframes" (modèle d'animation écrit en CSS).

La bonne solution actuelle

Elle est un peu plus compliquée. Pour changer le rayon du cercle, il faut faire une transformation de type "scale". @keyframes animer { 0% {fill-opacity:0.1; transform :scale(1); fill:red ;} 50% {fill-opacity :1 ; transform :scale(20) ; fill : green ; } 100% {fill-opacity:0.1; transform :scale(1); fill: red ;} } #rond {animation : animer 20s 0s infinite linear;transform-origin : 50% 50%;}

Pour qu'il y ait seulement changement de taille, il faut règler l'origine de la transformation au centre de l'objet avec la propriété transform-origin. En effet par défaut, l'origine d'un transformation pour un canevas SVG est son coin haut gauche.

Animation CSS basée sur transform:scale ou transform:rotate

Attention aux transformations de type "scale" ou "rotate" dans le cadre d'un canevas SVG.

Ci-dessous variation automatique de la taille d'un triangle

Le code SVG correspondant

...
	<polygon points="140,140 140,200 260,140"  stroke = 'gray' id ="triangle1"/> 
...

Le code CSS correspondant

polygon {stroke-width:6px; fill : none ; stroke-linejoin : round ;  } 
@keyframes agrandir1
	{
	from {transform : scale(1); }
	to {transform : scale(3)}
	}
#triangle1 {animation : agrandir1 10s 0s infinite linear alternate; transform-origin : center center ;}

Créez une page HTML avec ce code !
Supprimez la propriété transform-origin et observez le rendu.
Non seulement le triangle change de taille mais de plus il se déplace vers la droite.

Conclusion

Pour un élément SVG le point d'origine d'une transformation est le coin haut gauche du canevas.
Dans ce contexte, tout changement d'échelle s'accompagne aussi d'une translation.
Donc si vous ne voulez qu'un simple changement de taille de l'objet il faut utiliser la propriété transform-origin avec comme valeur "center center" OU "50% 50%".

La problématique est identique avec une rotation

Si vous voulez que l’élément SVG pivote autour de son centre plutôt qu’à partir du coin supérieur gauche du canevas il faut aussi utiliser transform-origin : center center

Ci-dessous deux carrés : le premier pivote a partir du coin supérieur gauche du canevas et le second pivote autour de son centre.
La rotation est de 45°.

Vivement SVG 2 !

On n'aura plus besoin d'utiliser transform:scale pour modifier la taille d'un objet puisqu'on pourra manipuler les paramètres géométriques de taille (r,width,height,rx,ry) dans le "keyframes".

On n'aura plus besoin d'utiliser transform:translate pour déplacer un objet puisqu'on pourra manipuler les paramètres géométriques de position (x,y,cx,cy) dans les "keyframes".

Pour en savoir plus :Animations SVG 2 via CSS 3

Animation de texte

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>

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;}

La balise SVG étant un élémént HTML, on peut lui appliquer un dégradé linéaire CSS.

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

Déplacer des 'sprites' dans le canevas SVG

Le code du fichier SVG (extrait)

...
<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>

Regardez attentivement le code de la balise SVG début !
Ce code est original. Il a été généré par le logiciel Boxy SVG : éditeur en ligne de SVG proposé par Google.

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

créer un floutage (filtre) et l'appliquer à différents objets
lier au document SVG deux images GIF
insérer une feuille de style interne avec le "keyframes" et l'application aux deux "sprites"

Insertion des animations SVG dans une page web

Attention comme le fichier SVG contient des liens vers d'autres images, l'insertion dans la page de cette animation ne peut se faire qu'avec la balise object. J'ai donc écrit dans cette page web le code suivant : <object type="image/svg+xml" data="road_css.svg" class ="grand" ></object>

Une animation 3D

Ci-dessous un jet qui atterit sur la piste.

L'animation 3D correspond à un fichier SVG. Je vous communique le code de ce fichier ci-dessous.
Ce fichier SVG comprend non seulement du SVG mais aussi du CSS.

Le code du fichier "atterisage.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 xlink: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 SVG 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 défini et identifié "avion".

Notez que le modèle d'animation repose sur la propriété transform avec ici la fonction scale() qui provoque de facto aussi une translation puisque le point d'origine de la transformation dans un canevas SVG n'a pas été modifié et est donc le coin haut gauche du canevas !

Insertion de l'image vectorielle animée dans cette page

Pour les mêmes raisons que l'exemple précédent, la balise IMG ne convient pas ; il faut utiliser la balise OBJECT pour insérer le fichier SVG dans la page. <object type="image/svg+xml" data="atterrissage.svg" class ="grand"></object>

L'affichage "responsive" de l'image vectorialle assurée par le code ci-dessus via la classe "grand".

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins statiques

Animations SVG

Le framework Snap SVG

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

SVG & CSS : animer un canevas SVG via le CSS

Un exemple basique pour commencer

Le code CSS

Première solution envisagée

La bonne solution actuelle

Animation CSS basée sur transform:scale ou transform:rotate

Ci-dessous variation automatique de la taille d'un triangle

Le code SVG correspondant

Le code CSS correspondant

Conclusion

La problématique est identique avec une rotation

Vivement SVG 2 !

Animation de texte

Le code SVG

Le code CSS

Déplacer des 'sprites' dans le canevas SVG

Le code du fichier SVG (extrait)

Insertion des animations SVG dans une page web

Une animation 3D

Le code du fichier "atterisage.svg"

Commentaire

Insertion de l'image vectorielle animée dans cette page