SVG XML:Transformations
Un article de WikiTuto.
Sommaire |
Introduction
Jusqu'à présent, nous avons vu comment placer des éléments graphiques parfois complexes dans un cadre donné. Afin d'aller plus loin, il serait possible d'explorer dans le détail la manière dont le format SVG gère les systèmes de coordonnées, et de faire une étude détaillée des transformations et changements de repère d'un point de vue mathématique -le seul à même de produire une démarche rigoureuse de l'ensemble des transformations à appliquer pour obtenir un effet voulu. Nous allons cependant ici nous contenter d'aborder chaque transformation indépendamment, tout en gardant présent à l'esprit que ce système de transformations est extrêmement complexe.
Transformations avec l'attribut transform
Introduction
Cet attribut est disponible pour l'ensemble des éléments de groupement (par exemple <g>), aussi bien que pour tous les éléments graphiques (figures géométriques, texte, etc.). Il accepte un certain nombre de paramètres permettant d'opérer translations, rotations, redimensionnement, transformations quelconques avec une matrice, etc.
Translations avec le paramètre translate
La syntaxe est par exemple <g transform="translate(50, 40)">, permettant d'opérer un déplacement du groupe de 50 pixels vers la droite, et 40 pixels vers le bas. Le code suivant...
<rect width="100" height="50" x="10" y="50" transform="translate(10,-20)"> </rect>
... déclare un rectangle placé initialement au point de coordonnées (10,50), mais translaté de 10 pixels vers la droite et 20 pixels vers le haut, ce qui le place finalement au point de coordonnées (20,30).
Redimensionnement avec scaling
La syntaxe est scale(<sx>[,<sy>]). Lorsque sy n'est pas indiqué, on considère que sy=sx.Attention, le système de coordonnées est modifié. Le code suivant...
<rect width="100" height="50" x="10" y="50" transform="scale(2)"> </rect>
... déclare un rectangle de 100 pixels de large et 50 pixels de haut, placé initialement au point de coordonnées (10,50). Une fois mis à l'échelle, ici augmenté d'un facteur 2 dans les deux directions, il devient un rectangle de 200 pixels de large et 100 pixels de haut, placé au point de coordonnées (20,100).
Rotation avec le paramètre rotate
La syntaxe est rotate(<rotate-angle> [<cx>,<cy>]). L'angle de rotation est indiqué en degrés. cx et cy définissent le centre de rotation. Attention ! Par défaut, il s'agit de l'origine du système de coordonnées locales, pas du centre de l'objet !
Ordre des opérations
L'ordre des opérations est séquentiel. Attention, à chaque transformation on obtient un nouveau système de coordonnées !
Exercice 1. Transformations
Exercice 1. Récapitulation
