Pourquoi l'ordre de transformation est-il important en SVG : mise à l'échelle/rotation ou rotation/échelle ?

Importance de l'ordre de transformation : pourquoi Rotation/Échelle diffère de Échelle/Rotation

Le chaînage des transformations en SVG implique l'application d'une série de transformations dans le ordre spécifié pour modifier le système de coordonnées d’un élément. Cet ordre peut avoir un impact significatif sur la forme résultante.

La spécification SVG souligne que chaque transformation est appliquée au système de coordonnées actuel, qui est une "copie" du système de coordonnées initial. Lorsque ce système de coordonnées est mis à l'échelle, une rotation ultérieure se produit autour de l'origine mise à l'échelle. Cela explique pourquoi, dans l'exemple donné, le premier rectangle (transformé en scale(2, 1) rotate(10deg)) apparaît asymétrique.

Considérez le système de coordonnées initial comme un carré. La mise à l'échelle (2, 1) l'étire horizontalement, doublant sa largeur. Lorsque nous tournons ensuite de 10 degrés, la rotation s'effectue autour de la largeur et de la hauteur mises à l'échelle, ce qui entraîne une répartition différente des sommets, créant un effet asymétrique.

D'un autre côté, lorsque nous tournons d'abord (rotation (10deg) scale(2, 1)) comme dans le deuxième rectangle, la rotation s'effectue autour de l'origine initiale, sans être affectée par la mise à l'échelle qui suit. Il en résulte un rectangle simplement agrandi sans aucune inclinaison.

Cette variance met en valeur le rôle crucial de l'ordre de transformation lors de l'enchaînement des transformations. Il est essentiel de comprendre comment chaque transformation affecte le système de coordonnées pour obtenir le résultat souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!