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

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

Attention pour un canevas 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

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

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

Reprenons le thème du trapéze animé

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

Le code CSS correspondant

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