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

Cette page ne fonctionne pas avec Edge !

Un chemin SVG animé avec CSS

Actualisez la page pour redémarrer l'animation.

Le trapèze change de taille et se déplace dans le canevas. Le cycle n'est répété que 5 fois.

Le code CSS correspondant

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

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

Rappel : comme je l'ai dit dans la page précédent, pour un objet SVG le point d'origine par défaut d'une transformation CSS est l'angle haut 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>

Une forme dessinée avec la balise path.

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 (pas de 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).

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