Pourquoi l'ordre des transformations affecte-t-il le résultat en SVG ?

Pourquoi l'ordre des transformations est-il important ?

Comprendre le chaînage de transformations en SVG

Selon la spécification SVG, chaque transformation appliquée à un élément SVG crée une copie du système de coordonnées actuel. Les transformations suivantes sont ensuite appliquées à ce nouveau système de coordonnées, créant un effet en cascade.

L'ordre des transformations est crucial car chaque transformation modifie le système de coordonnées avant que la transformation suivante ne soit appliquée. Par exemple, si un élément subit une rotation puis une translation, la translation se produit par rapport au système de coordonnées pivoté, et non à celui initial non pivoté.

Exemple : Mise à l'échelle/Rotation vs. Rotation/Échelle

Considérez l'exemple fourni dans l'extrait de code. Dans le premier rectangle (mise à l'échelle/rotation), le système de coordonnées actuel est mis à l'échelle d'un facteur 2 sur l'axe des x avant de subir une rotation de 10 degrés. Il en résulte une forme rectangulaire effectivement inclinée.

En revanche, dans le deuxième rectangle (rotation/échelle), le système de coordonnées actuel subit une rotation de 10 degrés avant d'être mis à l'échelle d'un facteur 2 dans l'axe x. -axe. Puisque la rotation est appliquée en premier, la mise à l’échelle ultérieure se produit par rapport au système de coordonnées pivoté. Il en résulte une forme rectangulaire simplement allongée le long de l'axe des x sans aucune inclinaison.

Pourquoi l'inclinaison se produit

Dans le cas du premier rectangle (mise à l'échelle/rotation), la mise à l'échelle l'opération affecte la forme de l'élément lui-même. Lorsque l'élément est ensuite pivoté, la forme transformée est pivotée, ce qui entraîne un effet d'inclinaison.

En revanche, dans le deuxième rectangle (rotation/mise à l'échelle), l'opération de rotation affecte le système de coordonnées. Lorsque l'élément est ensuite mis à l'échelle, la mise à l'échelle se produit par rapport au système de coordonnées pivoté, préservant la forme originale du rectangle sans inclinaison.

Conclusion

Comprendre l'ordre des transformations est essentiel pour contrôler les effets de chaînage de transformations en SVG. En appliquant des transformations dans un ordre précis, vous pouvez obtenir les effets visuels souhaités sur les éléments.

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!