Comment l'ordre des transformations SVG affecte-t-il la distorsion de forme résultante ?

Ordre des transformations et distorsion résultante

En SVG, lorsqu'un attribut de transformation est appliqué à un élément, il obtient une copie du système de coordonnées utilisateur actuel. Les transformations suivantes sont ensuite appliquées en séquence, chacune modifiant le système de coordonnées par rapport à son état précédent.

Cet ordre de transformations affecte considérablement le résultat final. Comme indiqué dans les guillemets spécifiés :

• Les transformations sont appliquées dans l'ordre dans lequel elles apparaissent dans l'attribut de transformation.
• Chaque transformation affecte le système de coordonnées en fonction des modifications appliquées par les transformations précédentes.

Insymétrie due à la séquence de transformations

Considérez le exemple dans le code fourni, où deux rectangles subissent des transformations :

Rectangle 1 : Scale(2, 1) puis Rotate(10deg)
Rectangle 2 : Rotation(10deg) puis Scale(2, 1)

Le rectangle 1 est déformé ou asymétrique en raison de l’ordre spécifique des transformations. Lorsque l'élément subit une mise à l'échelle, son système de coordonnées actuel est d'abord allongé horizontalement. Ce nouveau système de coordonnées subit ensuite une rotation de 10 degrés. En conséquence, le rectangle est effectivement asymétrique.

En revanche, le rectangle 2 n'est pas asymétrique en raison de l'ordre de transformation inversé. La rotation initiale de 10 degrés modifie le système de coordonnées avant que la mise à l'échelle ne se produise. Par conséquent, la mise à l'échelle allonge simplement le rectangle le long du nouvel axe de rotation, évitant ainsi toute distorsion.

Explication technique

Lorsque la mise à l'échelle est appliquée en premier, le cadre de délimitation de l'élément est agrandi ou contracté. Lorsque la transformation de rotation est ensuite appliquée, elle se produit dans cette zone de délimitation modifiée. Cela conduit à un effet d'inclinaison lorsque la rotation est appliquée aux proportions mises à l'échelle.

À l'inverse, lorsque la rotation est appliquée en premier, elle modifie l'orientation du système de coordonnées. Par la suite, une mise à l'échelle est appliquée à ce système en rotation, garantissant que l'allongement ou la contraction se produit le long du nouvel axe, ce qui donne un rectangle non asymétrique.

En comprenant l'ordre et l'interaction des transformations, il devient clair pourquoi l'enchaînement des transformations dans différentes séquences peuvent entraîner des résultats variables, comme observé dans cet exemple.

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!