Viewport et ViewBox SVG

Le viewport (Viewport) et le viewbox de l'image SVG peuvent configurer la taille de la partie visible de l'image.

La différence entre viewport et viewbox

1、viewport est le viewport, ce qui équivaut à l'écran de l'ordinateur.

2、viewbox est la zone de visualisation, ce qui équivaut à capturer une petite partie de l'écran et à l'agrandir pour couvrir tout l'écran, c'est l'effet de zoom.

3、preserveAspectRatio spécifie le mode d'alignement et de mise à l'échelle de viewbox par rapport au viewport.

Viewport

Le viewport (Viewport) est la zone visible de l'image SVG. Logiquement, l'image SVG peut être aussi large et haute que vous le souhaitez, mais vous ne pouvez voir qu'une partie spécifique de l'image à la fois. La zone visible est appelée viewport (Viewport).

Vous pouvez utiliser les attributs width et height de l'élément pour spécifier la taille du viewport (Viewport) <svg>. Voici un exemple :

<svg width="500" height="300"></svg>

Le viewport (Viewport) défini dans cet exemple est500 unités de largeur et300 unités de hauteur.

Unités du système de coordonnées

Si vous n'avez pas spécifié d'unité pour les attributs width et height, l'unité est supposée être en pixels. C'est-à-dire, width500 signifie500 pixels.

Si vous préférez utiliser des unités différentes des pixels, vous pouvez. Voici une liste des unités que vous pouvez utiliser avec l'élément <svg> :

Les unités que vous définissez sur l'élément <svg> ne touchent que la taille de l'élément <svg> (Viewport). La taille des formes SVG affichées dans l'image SVG est déterminée par les unités que vous définissez sur chaque forme. Si aucune unité n'est spécifiée, l'unité par défaut est en pixels.

Ceci est un exemple qui montre que <svg> a un ensemble d'unités pour les éléments, y compris des formes avec leurs propres ensembles d'unités :

<svg width="10cm" height="10cm">
　　　　<rect　x="50" y="100" width="50" height="50"
　　　　　　　　　　style="stroke: #000000; fill: none;"/>
　　　　<rect　x="100" y="100" width="50mm" height="50mm"
　　　　　　　　　　style="stroke: #000000; fill: none;"　/>
</svg>

L'image <svg> a ses unités définies en cm. Les deux éléments <rect> ont leurs propres ensembles d'unités. Un usage en pixels (sans unités définies explicitement) et un autre en mm pour la largeur et la hauteur.

Voici l'image générée. Notez que la boîte de droite (width et height en mm) est plus grande que la boîte de gauche.

Boîte de vue (ViewBox)

Vous pouvez redéfinir le sens des coordonnées sans unités à l'intérieur de l'élément <svg>. Vous pouvez utiliser l'attribut viewBox pour effectuer cette opération. Voici un exemple :

<svg width="500" height="200" viewBox="0 0　50　20" >
　　　　<rect　x="20" y="10"　width="10" height="5"
　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

Dans cet exemple, un <svg> de largeur500 pixels, et la hauteur est200 des éléments. L'attribut viewBox de <svg> contient quatre coordonnées. Ces coordonnées définissent la boîte de vue (ViewBox) de l'élément <svg>. Les coordonnées sont x y width height, les coordonnées de la boîte de vue (ViewBox).

Dans ce cas, la boîte de vue (ViewBox) commence à 0,0 et50 large et20 haute. Autrement dit,500 x 200 pixels<svg> l'élément utilise un système de coordonnées de 0,0 à50,20. En d'autres termes, chaque valeur de coordonnées interne pour la forme utilise1units<svg> correspond à la largeur500/50 = 10pixels, et la hauteur correspond200/20 = 10pixels. C'est pourquoi la position x est20, et la position y est10la raison pour laquelle le rectangle véritable se trouve200,100, et sa largeur (10) et la hauteur (5) correspondent respectivement à100 pixels et50 pixels.

Une autre méthode d'interprétation consiste à dire que les deux premières coordonnées de l'attribut viewBox dans <svg> définissent les coordonnées utilisateur en haut à gauche de l'élément, et les deux dernières coordonnées définissent les coordonnées utilisateur en bas à droite. L'espace à l'intérieur de <svg> est interprété comme allant des coordonnées supérieures gauches de la boîte de vue (ViewBox) aux coordonnées inférieures droites.

Effet de l'image après l'exécution :

Veuillez noter, la manière dont toutes les coordonnées à l'intérieur de l'élément <rect> sont interprétées1units.10pixels.

Garder le ratio largeur/hauteur

Si le ratio largeur/hauteur de la vue (Viewport) et de la boîte de vue (ViewBox) est différent, il est nécessaire de spécifier comment le visualiseur SVG (par exemple, un navigateur) doit afficher l'image SVG. Vous pouvez utiliser la propriété de l'élément preserveAspectRatio pour effectuer cette opération <svg<.

L'attribut preserveAspectRatio utilise deux valeurs séparées par des espaces. La première valeur indique comment la boîte de vue (ViewBox) s'aligne à l'intérieur du viewport (Viewport). Cette valeur elle-même est composée de deux parties. La deuxième valeur indique comment conserver le rapport d'aspect (si applicable).

La première valeur pour spécifier le mode d'alignement est composée de deux parties. La première partie spécifie l'alignement x, et la deuxième partie spécifie l'alignement y. Voici la liste des valeurs d'alignement x et y :

En ajoutant la composante y après la composante x, vous pouvez combiner les composantes x et y en une valeur. Voici deux exemples :

xMaxYMax
xMidYMid

Ces deux exemples font que la boîte de vue (ViewBox) et le viewport (Viewport) sont alignés de différentes manières. Dans le premier exemple, le bord droit de la boîte de vue est aligné avec le bord droit du viewport. Dans le deuxième exemple, le milieu de la boîte de vue est aligné avec le milieu du viewport.

La deuxième partie de la valeur de l'attribut preserveAspectRatio peut prendre trois valeurs différentes :

La deuxième partie de la valeur de l'attribut preserveAspectRatio est ajoutée à la première partie et séparée par des espaces. Voici deux exemples :

preserveAspectRatio="xMidYMid meet"
preserveAspectRatio="xMinYMin slice"

Je n'ai pas encore vraiment discuté des effets des différentes configurations preserveAspectRatio, donc regardons-les.

Tous les exemples suivants définissent width sur500, et définissez height sur75，et définissez l'attribut viewBox sur 0 0 250 75pixels. Cela signifie que le long de l'axe x, chaque unité de coordonnée correspondra à2pixels, mais le long de l'axe y, chaque unité de coordonnée correspondra à1pixels. Comme vous pouvez le voir, le ratio d'aspect le long de l'axe x est500/250 = 2，le ratio d'aspect le long de l'axe y est75/75 = 1。Ce pourrait entraîner une distorsion de l'image, mais dans les exemples suivants, nous verrons comment diverses configurations preserveAspectRatio traitent ces configurations.

C'est un exemple où preserveAspectRatio est configuré sur xMinYMin meet. Cela garantit que les ratios d'aspect sont conservés, et la taille de la boîte de visualisation (ViewBox) est ajustée pour s'adapter au viewport. Autrement dit, selon les deux ratios d'aspect (le ratio de l'axe y est1）Pour réduire la taille de la boîte de visualisation (ViewBox). En raison de la pièce xMinYMin, la boîte de visualisation (ViewBox) se trouvera dans le coin supérieur gauche du viewport. Voici le code et l'image générée :

<svg width="500" height="75"　viewBox="0　0　250　75"　　　　　preserveAspectRatio="xMinYMin　meet"
　　　　　style="border:　1px solid #cccccc;">
　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

Dans le deuxième exemple, la configuration preserveAspectRatio a été définie sur xMinYMin slice. Cela permet de conserver les ratios d'aspect, mais selon le ratio d'aspect plus grand (le ratio de l'axe x est2）Agrandir la boîte de visualisation (ViewBox), ce qui rend l'image trop grande pour être contenue dans le viewport. L'image est appelée "ciseau".

<svg width="500" height="75"　viewBox="0　0　250　75"　　　　　preserveAspectRatio="xMinYMin　slice"
　　　　　style="border:　1px solid #cccccc;">
　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

Dans le troisième exemple, la configuration preserveAspectRatio est définie sur none. Cela signifie que la boîte de visualisation (ViewBox) remplira tout le viewport, ce qui entraînera une distorsion de l'image, car les ratios d'aspect le long de l'axe x et y ne sont pas les mêmes.

<svg width="500" height="75"　viewBox="0　0　250　75"　　　　　　preserveAspectRatio="none"
　　　　　　style="border:　1px solid #cccccc;">
　　　　　<rect　x="1"　y="1"　width="50" height="50"
　　　　　　　　　　　style="stroke: #000000; fill:none;"/>
</svg>

Alignement de la boîte de vue (ViewBox)

Tous les exemples affichés jusqu'à présent ont utilisé la configuration xMinYMin. Selon la manière dont vous souhaitez aligner la boîte de vue (Viewport) sur la boîte de visualisation (ViewBox), d'autres configurations peuvent être utilisées. Je vais approfondir comment ces configurations fonctionnent, mais regardons d'abord un exemple :

<svg width="500" height="100" viewBox="0 0　50　50"　　　　
preserveAspectRatio="xMinYMin　meet"　　　　
style="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
style="stroke: #000000; fill:none;"/>　　　　
</svg>　　　　
<svg width="500" height="100" viewBox="0 0　50　50"　　　　
preserveAspectRatio="xMidYMin meet"　　　　
style="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
style="stroke: #000000; fill:none;"/>　　　　
</svg>　　　　
<svg width="500" height="100" viewBox="0 0　50　50"　　　　
preserveAspectRatio="xMaxYMin meet"　　　　
style="border:　1px solid #cccccc;">　　　　
<circle cx="25" cy="25" r="25"　　　　
style="stroke: #000000; fill:none;"/>　　　　
</svg>

Dans cet exemple, un <svg> avec le groupe d'éléments width est montré500 et la hauteur est définie sur100. La viewBox est définie sur 0 0 50 50. Cela entraînera un ratio largeur/hauteur de l'axe x de500/50 = 10， le ratio largeur/hauteur de l'axe y est100/50 =2。Le rayon du cercle dans l'image est25， afin de le rendre50 degrés de largeur, de hauteur50 unités. Par conséquent, elle remplit toute la boîte de vue (ViewBox) (et non la fenêtre de vue (Viewport)).

Lorsque l'opérateur meet est utilisé, la boîte de vue (ViewBox) est étirée suivant l'axe y, car son ratio largeur/hauteur est plus petit. Cela signifie que la boîte de vue (ViewBox) remplit toute la fenêtre de vue (Viewport) suivant l'axe y (verticalement), mais seulement suivant l'axe x (horizontalement)2 * 50 pixels = 100 pixels (ratio*La taille en X de la boîte de vue (ViewBox) ). La largeur de la fenêtre de vue (Viewport) est de500 pixels, donc vous devez spécifier comment aligner horizontalement la boîte de vue (ViewBox) dans la fenêtre de vue (Viewport). Cela est fait en utilisant xMin, xMid et xMax dans la partie preserveAspectRatio du premier sous-élément.

Voici trois images représentant l'utilisation de xMinYMin meet, xMidYmin meet et xMaxYmin meet dans l'attribut preserveAspectRatio. Notez comment la boîte de vue s'aligne à gauche, au centre et à droite (selon la configuration).

De même, si le ratio largeur/hauteur de l'image le long de l'axe x est inférieur à celui de l'axe y, il est nécessaire de spécifier son alignement vertical.

C'est un exemple ancien, mais maintenant il a width100 et height200 :

La taille de la boîte de vue (ViewBox) est la même, donc le ratio largeur/hauteur le long de l'axe y (200/50 = 4） est supérieur au ratio largeur/hauteur le long de l'axe x (100/50 = 2）。Par conséquent, la boîte de vue (ViewBox) remplit la fenêtre de vue (Viewport) dans la direction de l'axe x而非l'axe y. Cela rend nécessaire l'alignement vertical de la boîte de vue (ViewBox).

<svg width="100" height="200" viewbox="0 0　50　50" preserveaspectratio="xMinYMin meet" style="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewbox="0 0　50　50" preserveaspectratio="xMinYMid meet" style="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewbox="0 0　50　50" preserveaspectratio="xMinYMax meet" style="border:　1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>

Voici trois images, chacune montrant une éventuelle alignement Y possible en utilisant une valeur de sous-partie, YMin, YMid et YMax :