Système de coordonnées SVG

Comme beaucoup de systèmes de dessin informatique, le SVG utilise également un système de coordonnées en grille. Ce système de coordonnées a les caractéristiques suivantes : l'origine du système de coordonnées est en haut à gauche (0,0), l'axe X se dirige vers la droite, commence par le point (0,0) et x augmente progressivement. L'axe Y se dirige vers le bas, commence par le point (0,0) et y augmente progressivement. Les coordonnées sont exprimées en pixels

Le système de coordonnées du SVG (et la plupart des autres graphiques informatiques) est légèrement différent du système de coordonnées des mathématiques, des graphiques, etc.

　Mathématiques/Système de coordonnées cartésiennes

Dans le système de coordonnées cartésiennes, le point x=0, y=0 est en bas à gauche du graphique. Avec l'augmentation de x, le point se déplace vers la droite dans le système de coordonnées. Lorsque x diminue, le point se déplace vers la gauche dans le système de coordonnées. Avec l'augmentation de y, le point se déplace vers le haut dans le système de coordonnées. Lorsque y diminue, le point se déplace vers le bas dans le système de coordonnées.

Voici une illustration du système de coordonnées graphiques ordinaire, avec (0,0) en bas à gauche :

Système de coordonnées SVG

Dans le système de coordonnées SVG, le point x=0, y=0 est en haut à gauche. Par conséquent, par rapport au système de coordonnées graphiques ordinaire, l'axe y est inversé. Avec l'augmentation de y dans SVG, les points, les formes et autres descendent, plutôt que d'aller vers le haut.

Voici une illustration du système de coordonnées SVG, avec (0,0) en haut à gauche :

Unité du système de coordonnées

Il est possible de spécifier le système de coordonnées SVG1L'unité correspondante de l'unité. Vous pouvez effectuer cette opération n'importe où où vous pouvez spécifier des coordonnées (position x et y, width et height, etc.). Vous pouvez spécifier l'unité après la valeur, par exemple10cm ou125mm。

Si aucune unité n'est spécifiée après la valeur de coordonnées, l'unité par défaut est supposée être le pixel (px).

Voici la liste des unités qui peuvent être utilisées avec les éléments SVG :

Le <svg> dans les attributs width et height, les unités définies sur l'élément ne concernent que l'élément <svg> (viewport). Les formes à l'intérieur de l'élément <svg> doivent définir leurs propres unités. De même, si aucune unité n'est spécifiée, l'unité par défaut est le pixel.