L'ordre de transformation est-il important en SVG ?

Comprendre l'ordre des transformations en SVG

En SVG, enchaîner des transformations implique d'appliquer plusieurs transformations à un élément dans une séquence particulière. L'ordre dans lequel ces transformations sont appliquées affecte de manière significative le résultat final.

Conformément à la spécification SVG, chaque transformation est appliquée au système de coordonnées actuel, qui est le système de coordonnées après avoir été modifié par les transformations précédentes. Ce concept est crucial pour comprendre la différence entre appliquer des transformations dans des ordres différents.

Considérez deux rectangles, comme illustré dans le code que vous avez fourni. Le premier rectangle subit une mise à l'échelle (scale(2, 1)) suivie d'une rotation (rotate(10deg)). Le deuxième rectangle subit les mêmes transformations mais dans l'ordre inverse (rotate(10deg) scale(2, 1)).

Lorsque le premier rectangle est mis à l'échelle, son système de coordonnées est ajusté en conséquence, sa largeur et sa hauteur étant multipliées par 2. Par la suite, lorsque la rotation est appliquée, le rectangle ne pivote pas autour de son axe d'origine mais autour de l'axe du système de coordonnées mis à l'échelle. Cela entraîne l'apparence asymétrique que vous avez observée.

En revanche, lorsque le deuxième rectangle subit une rotation en premier, son système de coordonnées n'est pas affecté. La transformation d'échelle ultérieure augmente simplement la taille du rectangle sans l'incliner.

Pour résumer, l'ordre des transformations est important car chaque transformation opère sur le système de coordonnées qui a été modifié par les transformations précédentes. Dans le cas du premier rectangle, la mise à l'échelle précède la rotation, conduisant à une inclinaison. Dans le cas du deuxième rectangle, la rotation précède la mise à l'échelle, ce qui donne une apparence différente. Comprendre ce concept est essentiel pour manipuler des éléments en SVG à l'aide de transformations.

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!