Transformations en SVG

Dessin initial

1. Définir un rectangle de 100 pixels de large et 50 pixels de haut
2. Placer une copie de ce rectangle au point de coordonnées (50,20) et en le remplissant de navy avec une opacité de 1.

Translation

Placer une copie de ce rectangle au point de coordonnées (50,20), en le translatant de 20 pixels sur la gauche, 30 pixels vers le bas, lui affectant une couleur bleue avec un opacité de remplissage de 0.7.

Redimensionnement

Placer une copie de ce rectangle au point de coordonnées (50,20), en augmentant sa taille en y d'un facteur 2, et en diminuant sa taille en x du même facteur. Sa couleur sera aqua, avec une opacité de 0.7.

Rotation

Placer une copie de ce rectangle au point de coordonnées (150,100), et en le remplissant de purple.

1. Placer une copie de ce rectangle au point de coordonnées (150,100), en le faisant tourner de 30 degrés vers le bas par rapport au coin supérieur gauche du dessin, et en le remplissant de rouge avec une opacité de 0.7
2. Placer une copie de ce rectangle au point de coordonnées (150,100), en le faisant tourner de 30 degrés vers le bas par rapport à son coin supérieur gauche, et en le remplissant de fuchsia avec une opacité de 0.7.

Ordre des opérations

Placer une copie de ce rectangle au point de coordonnées (250,200), et en le remplissant en olive.

1. Placer une copie de ce rectangle au point de coordonnées (250,200), en le translatant de 50 pixels dans la direction des x positifs, puis en le faisant tourner de 45 degrés par rapport au coin supérieur gauche du dessin. Le remplir en vert, avec une opacité de 0.7.
2. Placer une copie de ce rectangle au point de coordonnées (250,200), en le faisant tourner de 45 degrés par rapport au coin supérieur gauche du dessin, puis en le translatant de 50 pixels dans la direction des x positifs. Le remplir en lime, avec une opacité de 0.7.