Viewport e ViewBox SVG

La viewport (Viewport) e la viewbox (ViewBox) dell'immagine SVG possono impostare le dimensioni della parte visibile dell'immagine.

La differenza tra viewport e viewbox

1、viewport, corrisponde allo schermo del display.

2、viewbox, la regione visiva, corrisponde a estrarre un piccolo pezzo dello schermo e ingrandirlo fino a riempire tutto lo schermo, ottenendo così l'effetto di ingrandimento.

3、preserveAspectRatio specifica il modo di allineamento e di scala tra viewbox e viewport.

Viewport (Viewport)

La viewport (Viewport) è la regione visibile dell'immagine SVG. Logicamente, l'immagine SVG può essere larga e alta come desiderato, ma solo una parte specifica dell'immagine può essere vista in una volta. La regione visibile è chiamata viewport (Viewport).

Puoi specificare la dimensione del viewport utilizzando gli attributi width e height dell'elemento. Ecco un esempio:

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

Il viewport definito in questo esempio è di 500 unità di larghezza e 300 unità di altezza.

Unità del sistema di coordinate

Se non specifici alcuna unità negli attributi width e height, l'unità sarà di default in pixel. Ad esempio, width500 rappresenta 500 pixel.

Se preferisci utilizzare unità diverse dai pixel, puoi. Ecco un elenco di unità che possono essere utilizzate insieme all'elemento <svg>:

Le unità impostate sull'elemento <svg> influenzano solo la dimensione dell'elemento <svg> (viewport). La dimensione delle forme SVG visualizzate è determinata dalle unità impostate su ciascuna forma. Se non vengono specificate unità, queste saranno di default in pixel.

Ecco un esempio che mostra un elemento <svg> con un set di unità, che contiene forme con i loro set di unità:

<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'immagine <svg> ha la sua impostazione di unità in cm. Questi due elementi <rect> hanno i loro set di unità. Uno è in pixel (senza unità impostate esplicitamente) e l'altro è in mm per width e height.

Ecco l'immagine generata. Nota che la scatola di destra (con width e height in mm) è più grande della scatola di sinistra.

Visual Box (ViewBox)

Puoi ridefinire il significato delle coordinate non unitarie all'interno dell'elemento <svg>. Puoi eseguire questa operazione utilizzando l'attributo viewBox. Ecco un esempio:

<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>

Questo esempio crea un elemento <svg> con una larghezza di 500 pixel e un'altezza di 200. L'attributo viewBox dell'<svg> contiene quattro coordinate. Queste coordinate definiscono il riquadro di visualizzazione (ViewBox) dell'elemento <svg>. Le coordinate sono x y larghezza altezza del riquadro di visualizzazione (ViewBox).

In questo caso, il riquadro di visualizzazione (ViewBox) inizia da 0,0 e ha una larghezza di 50 e una altezza di 20. Questo significa che un elemento <svg> di 500 x 200 pixel utilizza il sistema di coordinate da 0,0 a 50,20. In altre parole, ogni unità di coordinate interna all'<svg> corrisponde a 10 pixel di larghezza (500/50 = 10 pixel), mentre l'altezza corrisponde a 10 pixel (200/20 = 10 pixel). Ecco perché il rettangolo con posizione x 20 e y 10 si trova effettivamente a 200,100, e la sua larghezza (10) e altezza (5) corrispondono rispettivamente a 100 pixel e 50 pixel.

Un'altra spiegazione è che i primi due coordinate dell'attributo viewBox dell'<svg> definiscono le coordinate utente dell'angolo superiore sinistro dell'elemento, mentre le ultime due coordinate definiscono le coordinate utente dell'angolo inferiore destro. Lo spazio interno <svg> viene interpretato come le coordinate dal punto superiore sinistro al punto inferiore destro del riquadro di visualizzazione (ViewBox).

Effetto dell'immagine dopo l'esecuzione:

Notare come tutte le coordinate all'interno dell'elemento <rect> vengono interpretate come 10 pixel per unità.

Mantenere il rapporto di aspetto

Se l'aspetto proporzionale (rapporto di altezza e larghezza) del viewport (Viewport) e del riquadro di visualizzazione (ViewBox) sono diversi, è necessario specificare come il visualizzatore SVG (ad esempio, il browser) deve visualizzare l'immagine SVG. Puoi eseguire questa operazione utilizzando l'attributo preserveAspectRatio dell'elemento <svg<.

L'attributo preserveAspectRatio utilizza due valori separati da spazi. Il primo valore indica come il riquadro di visualizzazione (ViewBox) si allinea all'interno del viewport (Viewport). Questo valore stesso è composto da due parti. Il secondo valore indica come mantenere il rapporto di aspetto (se presente).

Il primo valore specificato per il metodo di allineamento è composto da due parti. La prima parte specifica il metodo di allineamento x, mentre la seconda parte specifica il metodo di allineamento y. Ecco l'elenco dei valori di allineamento x e y:

Aggiungendo il componente y dopo il componente x, è possibile combinare il componente x e il componente y in un valore. Ecco due esempi:

xMaxYMax
xMidYMid

Questi due esempi differiscono nel modo in cui la ViewBox si allinea con il viewport. Il primo esempio allinea il margine destro della ViewBox con il margine destro del viewport. Il secondo esempio allinea il centro della ViewBox con il centro del viewport.

La seconda parte del valore di preserveAspectRatio può assumere tre diversi valori:

La seconda parte del valore di preserveAspectRatio viene aggiunta alla prima parte e separata da uno spazio. Ecco due esempi:

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

Non ho ancora discusso degli effetti delle diverse impostazioni di preserveAspectRatio, quindi vediamo.

Tutti gli esempi seguenti impostano width su 500, height su 75 e la proprietà viewBox su 0 0 250 75. Questo significa che lungo l'asse x, ogni unità di coordinate corrisponde a 2 pixel, ma lungo l'asse y, ogni unità di coordinate corrisponde solo a 1 pixel. Come puoi vedere, il rapporto di aspetto lungo l'asse x è 500/250 = 2, e lungo l'asse y è 75/75 = 1. Questo potrebbe causare distorsioni dell'immagine, ma nei seguenti esempi vedremo come vari impostazioni di preserveAspectRatio gestiscono queste impostazioni.

Questo è un esempio di preserveAspectRatio impostato su xMinYMin meet. Questo garantisce che il rapporto di aspetto sia mantenuto e che la dimensione della ViewBox venga regolata per adattarsi al viewport. In altre parole, la ViewBox viene scalata in base al minore dei due rapporti di aspetto (il rapporto dell'asse y è 1). A causa del componente xMinYMin, la ViewBox si troverà nell'angolo in alto a sinistra del viewport. Ecco il codice e l'immagine generata:

<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>

Il secondo esempio ha impostato preserveAspectRatio su xMinYMin slice. Questo mantiene il rapporto di altezza e larghezza, ma scala la ViewBox in base al rapporto di altezza e larghezza maggiore (rapporto dell'asse x di 2), causando che l'immagine sia troppo grande per essere contenuta nel Viewport. L'immagine è chiamata "slice".

<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>

Il terzo esempio ha impostato preserveAspectRatio su none. Questo significa che la ViewBox riempirà l'intero Viewport, causando distorsioni dell'immagine poiché i rapporti di altezza e larghezza lungo l'asse x e y non sono uguali.

<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>

Allineamento della ViewBox

Finora tutti gli esempi mostrati hanno utilizzato la configurazione xMinYMin. A seconda di come si desidera allineare la ViewBox all'interno del Viewport, possono essere utilizzate altre impostazioni. Cercherò di approfondire come funzionano queste impostazioni, ma prima diamo un'occhiata a un esempio:

<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>

Questo esempio mostra un <svg> con elementi width 500 e height impostati a 100. viewBox impostato a 0 0 50 50. Questo porterà a un rapporto di aspetto lungo l'asse x di 500/50 = 10 e lungo l'asse y di 100/50 = 2. Il raggio del cerchio nell'immagine è 25, rendendo il cerchio largo 50 unità e alto 50 unità. Pertanto, riempirà l'intera vista (ViewBox) (non la vista (Viewport)).

Quando si utilizza il simbolo meet, la vista (ViewBox) verrà scalata lungo l'asse y, poiché il suo rapporto di aspetto è più piccolo. Questo significa che la vista (ViewBox) riempirà l'intera vista (Viewport) lungo l'asse y (verticalmente), ma solo lungo l'asse x (orizzontalmente) 2 * 50 pixel = 100 pixel (rapporto di aspetto * dimensione X della vista (ViewBox)). Poiché la larghezza della vista (Viewport) è di 500 pixel, è necessario specificare come allineare orizzontalmente la vista (ViewBox) all'interno della vista (Viewport). Questo viene fatto utilizzando i valori xMin, xMid e xMax nel primo segmento dell'attributo preserveAspectRatio.

Ecco tre immagini che rappresentano l'uso di xMinYMin meet, xMidYmin meet e xMaxYmin meet nel preservedAspectRatio attributo. Notare come la vista si allinea con il lato sinistro, centrale e destro (a seconda delle impostazioni).

Allo stesso modo, se il rapporto di aspetto dell'immagine lungo l'asse x è minore del rapporto di aspetto lungo l'asse y, è necessario specificare il suo allineamento y.

Questo è un esempio precedente, ma ora con width100 e height200:

La dimensione della vista (ViewBox) è la stessa, quindi il rapporto di aspetto lungo y (200/50 = 4) è maggiore del rapporto di aspetto lungo x (100/50 = 2). Pertanto, la vista (ViewBox) verrà riempita nella direzione dell'asse x (più che in quella dell'asse y). Questo richiede di specificare l'allineamento y della vista (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>

Queste sono tre immagini, ognuna delle quali mostra una possibile allineamento y utilizzando un valore di parte secondaria: YMin, YMid e YMax: