SVG & CSS : Utilité de la propriété transform-origin

Un chemin SVG animé avec CSS

Le trapèze change de taille et se déplace dans le canevas. Le cycle est répété à l'infini.

Le code CSS correspondant

@keyframes animer1 { 0%{transform : scale(1); } 50%{transform : scale(2); } 100%{transform : scale(1); } } #trapeze {animation : animer1 12s 0s infinite linear ; }

Je ne souhaitais qu'un changement d'échelle de la forme et pourtant il y a aussi translation ...

Attention pour un objet SVG le point d'origine par défaut de la transformation CSS est l'angle haut gauche du canevas.
Donc le changement d'échelle s'applique non seulement aux dimensions de l'objet mais aussi à ses coordonnées X,Y de cet objet dans le canevas. Il y a donc également translation !

Le code SVG correspondant

<svg width="50%" height="auto" viewBox ="0 0 400 400"> <path d= "M100,100 h100 v100 h-110 z" fill = "coral" id ="trapeze"/> </svg>

Aucune difficulté pour le code SVG : utilisation de la balise path pour dessiner un trapèze.

Deux ronds SVG animés via un "keyframes" CSS

Avec cet exemple vous allez découvrir comment générer une changement d'échelle d'un objet SVG et seulement un changement d'échelle (sans translation de l'objet).

Le code CSS correspondant

@keyframes animer2 { 0%{fill-opacity : 0.2 ;transform : scale(1); } 50%{fill-opacity : 0.5 ; transform : scale(1.5); } 100%{fill-opacity : 1 ; transform : scale(2); } } #disque1 {animation : animer2 6s 0s infinite linear alternate ;transform-origin : 50% 50%; } #disque2 {animation : animer2 9s 3s infinite linear alternate ;transform-origin : 50% 50%; }

Pour que le changement d'échelle se fasse à partir du centre du canevas il suffit de modifier le point d'origine par défaut de la transformation CSS avec la propriété transform-origin. Dans l'exemple le point d'origine de la transformation devient le centre du canevas donc il y a seulement changement de rayon des cercles (et pas de translation).

Attention vous animez un objet SVG et non pas un objet HTML donc il faut utiliser la propriété "fill-opacity" (et non pas "opacity").

Le code SVG correspondant

<svg width="50%" height="auto" viewBox ="0 0 400 400"> <circle r ="100" cx ="50%" cy ="50%" style ="fill : red ;" id ="disque1"/> <circle r ="100" cx ="50%" cy ="50%" style ="fill : yellow ; " id ="disque2"/> </svg>

Reprenons le thème du trapéze animé

Maintenant je sais comment modifier uniquement les dimensions du trapèze.

Le code CSS correspondant

@keyframes animer3 { 0%{transform : scale(1); } 50%{transform : scale(2); } 100%{transform : scale(1); } } #trapeze2 {animation : animer3 12s 0s infinite linear ; transform-origin :50% 50%;}

J'ai modifié le point d'origine de la transformation afin que le changement d'échelle ne s'applique qu'aux dimensions.
Retour menu