Introduction SVG 2D de HTML5 6 - Présentation du système de coordonnées Windows et du système de coordonnées et de la transformation des coordonnées de l'utilisateur

Auteur：Eve Cole Date de mise à jour：2025-04-06 02:00:03

Système de coordonnées

Il existe deux systèmes de coordonnées dans SVG: le système de coordonnées de la fenêtre et le système de coordonnées utilisateur. Par défaut, les points du système de coordonnées de l'utilisateur et du système de coordonnées de la fenêtre correspondent un par un, qui sont tous deux à l'origine dans le coin supérieur gauche de la fenêtre, l'axe X est horizontalement vers la droite, et l'axe y est verticalement vers le bas; Comme indiqué dans la figure ci-dessous:

La position de la fenêtre du SVG est généralement spécifiée par CSS, et la taille est définie par la largeur d'attribut et la hauteur de l'élément SVG. Cependant, si le SVG est stocké dans un objet intégré (comme un élément d'objet, ou un autre élément SVG), et le document contenant le SVG est formaté avec CSS ou XSL, et le CSS ou d'autres valeurs de taille spécifiées de ces objets périphériques peuvent déjà calculer la taille de la fenêtre, alors la taille de l'objet périphérique sera utilisée.

Ici, nous devons distinguer les concepts de fenêtres, de systèmes de coordonnées de fenêtres et de systèmes de coordonnées des utilisateurs:

Fenêtre : fait référence à la zone rectangulaire visible sur la page Web, avec une longueur et une largeur limitées, et cette zone est généralement liée à la taille de l'objet périphérique.

Système de coordonnées de fenêtre : essentiellement un système de coordonnées avec l'origine, l'axe x et l'axe y; et il s'étend infiniment dans les deux sens. Par défaut, l'origine est dans le coin supérieur gauche de la fenêtre, l'axe X est horizontalement vers la droite, et l'axe y est verticalement vers le bas. Les points de ce système de coordonnées peuvent être transformés.

Système de coordonnées de l'utilisateur : essentiellement un système de coordonnées avec l'origine, l'axe x et l'axe y; et il s'étend infiniment dans les deux sens. Par défaut, l'origine est dans le coin supérieur gauche de la fenêtre, l'axe X est horizontalement vers la droite, et l'axe y est verticalement vers le bas. Les points de ce système de coordonnées peuvent être transformés.

Par défaut, le système de coordonnées de la fenêtre et le système de coordonnées de l'utilisateur se chevauchent, mais il convient de noter ici que le système de coordonnées de la fenêtre appartient à l'élément qui crée la fenêtre. Une fois le système de coordonnées de la fenêtre déterminé, la tonalité de coordonnée de la fenêtre entière sera déterminée. Cependant, le système de coordonnées utilisateur appartient à chaque élément graphique. Tant que le graphique a une transformation de coordonnées, un nouveau système de coordonnées utilisateur sera créé. Toutes les coordonnées et dimensions de cet élément utilisent ce nouveau système de coordonnées utilisateur.

Pour le dire simplement: le système de coordonnées de la fenêtre décrit le profil de coordonnées initial de tous les éléments de la fenêtre, et le système de coordonnées utilisateur décrit le profil de coordonnées de chaque élément. Par défaut, tous les éléments utilisent le système de coordonnées utilisateur par défaut qui coïncide avec le système de coordonnées de la fenêtre.

Coordonner la transformation de l'espace

Examinons la transformation des coordonnées de l'utilisateur Canvas, qui sont implémentées via des fonctions de traduction, de mise à l'échelle et de rotation; Chaque transformation fonctionnera sur les chiffres dessinés plus tard, à moins que la transformation ne soit effectuée à nouveau, qui est le concept du système de coordonnées utilisateur actuel. Canvas n'a qu'un seul système de coordonnées utilisateur.

Dans SVG, la situation est complètement différente. En tant qu'élément de graphique vectoriel, SVG lui-même peut essentiellement être considéré comme des systèmes de coordonnées utilisateur; Les deux espaces de coordonnées de SVG peuvent être transformés: transformation de l'espace de fenêtre et transformation de l'espace utilisateur. La transformation de l'espace de fenêtre est contrôlée par la propriété Viewbox des éléments associés (ces éléments créent de nouvelles fenêtres); La transformation de l'espace utilisateur est contrôlée par l'attribut de transformation de l'élément graphique. La transformation de l'espace de fenêtre est appliquée à la fenêtre entière correspondante, et la transformation de l'espace utilisateur est appliquée à l'élément actuel et à ses éléments enfants.

Transformation de la fenêtre - propriété Viewbox

Tous les éléments qui peuvent créer une fenêtre (voir la section suivante), plus le marqueur, le modèle et les éléments de vue, ont un attribut ViewBox.

Le format de la valeur d'attribut Viewbox est (x0, y0, u_width, u_height), et chaque valeur est séparée par une virgule ou un espace. Ils déterminent conjointement la zone affichée par la fenêtre: les coordonnées du coin supérieur gauche de la fenêtre sont définies sur (x0, y0), la largeur de la fenêtre est définie sur U_Width et la hauteur est u_height; Cette transformation fonctionne pour toute la fenêtre.

Ne confondez pas ici: la taille et la position de la fenêtre ont été déterminées par l'élément qui crée la fenêtre et les éléments périphériques (par exemple, la fenêtre créée par l'élément SVG le plus externe est déterminée par CSS, largeur et hauteur). La Viewbox est en fait pour définir cette zone déterminée pour afficher la partie du système de coordonnées de la fenêtre.

Le réglage de Viewbox comprend en fait deux transformations: zoom et traduction de l'espace de fenêtre.

Le calcul de la transformation est également très simple: prenez la fenêtre de vue de l'élément SVG le plus extérieur comme exemple, en supposant que la largeur et la longueur de SVG sont définies sur la largeur, la hauteur et le réglage de Viewbox est (x0, y0, u_width, u_height). Ensuite, les échelles de largeur et de hauteur de la figure dessinée sont: largeur / u_width, hauteur / u_height respectivement. Les coordonnées du coin supérieur gauche de la fenêtre sont réglées sur (x0, y0).

Découvrez les différences dans les résultats tirés par les codes suivants:

</svg>

Dans la figure dessinée dans l'exemple ci-dessus, vous pouvez voir des rectangles verts et rouges. Dans ce cas, les points du système de coordonnées de la fenêtre correspondent toujours aux points de la fenêtre, ce qui est également la valeur par défaut.

</svg>

Dans la figure dessinée dans l'exemple ci-dessus, vous ne pouvez voir que le rectangle vert, et le rectangle vert s'affiche à l'écran avec 200 * 200 pixels. À l'heure actuelle, les points de coordonnées ne sont plus un par un, et la figure est agrandie.

</svg>

Dans la figure dessinée dans l'exemple ci-dessus, les unités du système de coordonnées de la fenêtre sont réduites, donc les deux rectangles sont réduits.

Dans le travail quotidien, une tâche que nous devons souvent accomplir est de mettre à l'échelle un ensemble de graphiques pour l'adapter à son conteneur parent. Nous pouvons y parvenir en définissant la propriété ViewBox.

Éléments qui peuvent créer de nouvelles fenêtres

À tout moment, nous pouvons nicher les fenêtres. Lors de la création d'une nouvelle fenêtre, un nouveau système de coordonnées de fenêtre et un système de coordonnées utilisateur sera créé, et bien sûr, un nouveau sera créé, y compris le chemin de découpage. Ce qui suit est une liste d'éléments qui peuvent créer une nouvelle fenêtre:

SVG : SVG prend en charge la nidification.

Symbole : créez une nouvelle fenêtre lorsqu'elle est instanciée par l'élément d'utilisation.

Image : une nouvelle fenêtre est créée lors du référence à un élément SVG.

ForeignObject : Créez une nouvelle fenêtre pour rendre l'objet à l'intérieur.

Continuez à échelle de la propriété à l'échelle-préservera

Parfois, surtout lorsque vous utilisez Viewbox, nous nous attendons à ce que les graphiques occupent la fenêtre entière au lieu de mettre à l'échelle dans la même proportion dans les deux sens. Parfois, nous espérons que les deux directions de la figure sont mises à l'échelle à une échelle fixe. Utilisez l'attribut preservasctratio pour atteindre le but de contrôler cela.

Cette propriété est tous les éléments qui peuvent créer une nouvelle fenêtre, plus l'image, le marqueur, le motif et les éléments de vue. De plus, l'attribut PreservasPeclectRatio ne fonctionnera qu'après le défilé de la Viewbox sur l'élément. Si la Viewbox n'est pas définie, la propriété PreservasPectratio est ignorée.

La syntaxe de l'attribut est la suivante: preservaspecTratio = [Defer] <align> [<eeetorslice>]

Notez que les 3 paramètres doivent être séparés par des espaces.

Regarder : paramètre facultatif, valide uniquement pour les éléments d'image. Si la valeur de l'attribut PreservaspecTRATIO dans l'élément d'image commence par un report, cela signifie que l'élément d'image utilise le rapport de mise à l'échelle de l'image référencée. Si l'image référencée n'a pas de rapport de mise à l'échelle, le report est ignoré. Tous les autres éléments ignorent cette chaîne.

Alignez : ce paramètre détermine l'alignement de l'échelle unifiée et les valeurs suivantes peuvent être prises:

Aucune - mise à l'échelle unifiée non forcée, afin que les graphiques puissent remplir complètement la fenêtre entière.

Xminymin - Forcer la mise à l'échelle uniforme et aligner les <min-x> et <min-y> définis dans la boîte de vue sur les valeurs minimales x et y de la fenêtre.

Xmidymin - Force la mise à l'échelle unifiée et alignez le point médian dans la direction X dans Vivewbox au milieu de la direction X de la fenêtre. En bref, le point médian dans la direction x est aligné et la direction y est la même que ci-dessus.

xmaxymin - Forcer la mise à l'échelle uniforme et aligner le <min-x> + <largeur> Définir dans la boîte de vue sur la valeur x maximale de la fenêtre.

Il existe d'autres types de valeurs similaires à: Xminymid, xmidymid, xmaxymid, xminymax, xmidymax, xmaxymax. La signification de ces combinaisons est similaire aux situations ci-dessus.

MeetingLice : Paramètre facultatif, vous pouvez utiliser les valeurs suivantes:

Rencontre - Valeur par défaut, évoluer uniformément les graphiques, afin que tous les graphiques soient affichés dans la fenêtre.

Slice - Mise à l'échelle unifiée des graphiques, permettant aux graphiques de remplir la fenêtre, et les excès sont découpés.

Le chiffre suivant explique les effets de divers remplissages:

Transformation du système de coordonnées utilisateur - Attribut de transformation

Ce type de transformation est spécifié en définissant la propriété de transformation de l'élément. Il convient de noter ici que la transformation de l'élément défini par l'attribut de transformation n'affecte que l'élément et ses éléments enfants, n'a rien à voir avec d'autres éléments et n'affecte pas d'autres éléments.

Traduction - traduire

La transformation de traduction traduit les valeurs de coordonnées pertinentes à la position spécifiée, et la transformation doit être transmise en la quantité traduite sur les deux axes. Voir l'exemple:

Cet exemple tire un rectangle et traduit son point de départ (0,0) à (30,40). Bien que la valeur de coordonnée de (x, y) puisse être définie directement, il est également très pratique de l'implémenter en utilisant la transformation de traduction. Le deuxième paramètre de cette transformation peut être omis et la valeur par défaut est traitée lorsque 0 est traité.

Tourner - tourner

La rotation d'un élément est également une tâche très courante. Nous pouvons utiliser la transformation rotative pour l'implémenter, ce qui nécessite que le paramètre d'angle de rotation soit passé. Voir l'exemple:

Cet exemple montre un rectangle de rotation de 45 degrés. Quelques notes:

1. La transformation ici prend la valeur d'angle comme paramètre.

2. La rotation fait référence à la rotation par rapport à l'axe x.

3. La rotation est étendue autour de l'origine (0,0) du système de coordonnées utilisateur.

Penché - biais

La transformation prend également en charge la transformation de l'inclinaison, qui peut être inclinée le long de l'axe x (angles gauche et gauche et droit sont inclinés vers la droite, qui est en fait incliné à l'axe y), ou le long de l'axe Y (haut et bas, qui est incliné à l'angle vers le bas, qui est en fait incliné à l'axe x). Cette transformation nécessite un paramètre d'angle à passer, ce qui déterminera l'angle d'inclinaison. Voir l'exemple suivant:

<SVG>

</svg>

D'après le résultat, vous pouvez voir directement la position et la forme du rectangle de la même taille après différentes transformations d'inclinaison. Notez ici que la position de départ du rectangle a changé, car dans le nouveau système de coordonnées (30,30) est déjà dans des positions différentes.

Échelle d'échelle

L'objet de mise à l'échelle est complété par une transformation de mise à l'échelle, qui accepte 2 paramètres, spécifiant les rapports de mise à l'échelle sur horizontal et vertical respectivement. Si le deuxième paramètre est omis, la même valeur que le premier paramètre est prise. Voir l'exemple suivant:

<SVG>

<text x = "20" y = "20" font-size = "20"> ABC (échelle) </XET>

<text x = "50" y = "50" font-size = "20" transform = "Scale (1.5)"> ABC (échelle) </XET>

</svg>

Transformer Matrix - Matrix

Quiconque a étudié les graphiques sait que toutes les transformations sont en fait représentées par des matrices, de sorte que les transformations ci-dessus peuvent en fait être représentées par une matrice 3 * 3:

BDF

0 0 1

Étant donné que seules 6 valeurs sont utilisées, elle est également abrégée comme [ABCDEF]. Attribuez une matrice (A, B, C, D, E, F) pour se transformer pour implémenter la transformation correspondante. La transformation convertira à la fois les coordonnées et les longueurs en nouvelles dimensions. Les matrices correspondantes des transformations ci-dessus sont les suivantes:

Transformation de la traduction [1 0 1 0 TX TY]:

1 0 TX

0 1 ty

0 0 1

Transformation de mise à l'échelle [SX 0 0 SY 0 0]:

SX 0 0

0 sy 0

0 0 1

Transformation rotationnelle [cos (a) sin (a) -sin (a) cos (a) 0 0]:

cos (a) -sin (a) 0

péché (a) cos (a) 0

00 1

Inclinaison le long de l'axe des x [1 0 tan (a) 1 0 0]:

1 tan (a) 0

0 1 0

0 0 1

Inclinaison le long de l'axe y [1 tan (a) 0 1 0 0]:

11 0

Tan (a) 1 0

00 1

Changer l'essence

Lorsque nous avons déjà résumé la toile, nous savions que toutes sortes de transformations sont appliquées au système de coordonnées utilisateur. Dans SVG, toutes les transformations sont également pour deux systèmes de coordonnées (essentiellement des systèmes de coordonnées utilisateur). Après avoir spécifié l'attribut Transform à l'objet conteneur ou à l'objet graphique, ou en spécifiant l'attribut Viewbox à SVG, symbole, marqueur, modèle, vue, SVG se transformera en fonction du système de coordonnées utilisateur actuel pour créer un nouveau système de coordonnées utilisateur et agira sur l'objet actuel et ses sous-objets. Les unités de coordonnées et de longueur spécifiées dans cet objet ne sont plus 1: 1 correspondant au système de coordonnées périphériques, mais sont converties au nouveau système de coordonnées utilisateur lorsqu'elle se déforme; Ce nouveau système de coordonnées utilisateur n'agit que sur l'élément actuel et ses éléments enfants.

Chaîne de transformation

La propriété Transform prend en charge la définition de plusieurs transformations. Ces transformations sont juste séparées par des espaces au milieu et placées ensemble dans la propriété. L'effet d'exécution est le même que d'effectuer ces transformations indépendamment dans l'ordre.

<! - Les éléments graphiques vont ici ->

</g>

L'effet ci-dessus est le même que celui qui suit:

<! - Les éléments graphiques vont ici ->

</g>

unité

Enfin, parlons des unités. Toutes les coordonnées et longueurs peuvent être équipées avec et sans unités.

Sans unité

Une valeur sans unités est considérée comme ayant des unités utilisateur, qui est la valeur unitaire du système de coordonnées utilisateur actuel.

La situation d'apporter des unités

Les unités pertinentes dans SVG sont les mêmes que dans CSS: EM, EX, PX, PT, PC, CM, MM et in.% Peuvent également être utilisées pour la longueur.

Les unités relatives de mesure: EM et EX sont également similaires à CSS, par rapport à la taille de la police et à la hauteur X de la police actuelle.

Unité absolue de mesure: un PX est égal à une unité utilisateur, c'est-à-dire que 5px est le même que 5. Cependant, si un PX correspond à un pixel dépend de la question de savoir s'il y a eu des transformations.

Les autres unités sont essentiellement des multiples de Px: 1pt = 1,25px, 1pc = 15px, 1 mm = 3,543307px, 1cm = 35,43307px, 1in = 90px.

Si la largeur et la hauteur de l'élément SVG le plus extérieur ne spécifient pas les unités (c'est-à-dire les unités utilisateur), ces valeurs seront considérées comme PX.

Cet article est assez difficile à parler. En fait, n'oubliez pas que les coordonnées et la longueur de l'élément graphique se réfèrent aux coordonnées et à la longueur du nouveau système de coordonnées utilisateur après la double transformation du système de coordonnées de la fenêtre et de la transformation du système de coordonnées de l'utilisateur.

Référence pratique:

Index du script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Centre de développement: https://developer.mozilla.org/en/svg

Référence populaire: http://www.chinasvg.com/

Document officiel: http://www.w3.org/tr/svg11/