SVG Viewport e viewBox (per principianti completi)

In questo suggerimento rapido stiamo andando ad abbattere esattamente cosa viewport e viewBox sono in SVG. Imparerai:

• La differenza tra il viewport e viewBox
• Gli aspetti dei tuoi SVG che puoi controllare con ciascuno
• Come sono applicati ciascuno

Cominciamo!

SVG Viewport 

Se letteralmente analizzi la parola "viewport" riceverai un suggerimento sul suo ruolo in SVG; crea una "porta" attraverso la quale è possibile "visualizzare" una sezione di un SVG. Puoi immaginarlo come qualcosa di simile a una finestra a oblò attraverso la quale puoi vedere il mondo al di là.

La finestra SVG è come una finestra oblò la cui dimensione determina ciò che è possibile vedere attraverso di essa

Come con una finestra, la dimensione della vista determina quanto puoi vedere, ma non definisce la dimensione di ciò che potrebbe essere visibile attraverso quella finestra. Ciò che è dall'altra parte potrebbe teoricamente essere di qualsiasi dimensione.

Ad esempio, potresti avere una forma nell'immagine che è 100px di 100px, ma se si imposta la vista su 50px di 50px vedrai solo una parte di quella forma. La dimensione del viewport viene impostata aggiungendo larghezza e altezza attributi al svg elemento, così:

Nel primo SVG vediamo l'intero 100px di 100px cerchio, ma nel secondo SVG quando impostiamo la dimensione della finestra su 50px di 50px vediamo solo un quarto del cerchio.

SVG viewBox

Il viewBox può essere pensato come il viewport ma con due funzionalità extra: può "pan" e può "zoomare". Costruendo sull'analogia del "guardare attraverso il vetro", se il viewport è come una finestra, il viewBox è come un telescopio.

SVG viewBox è molto simile al viewport, ma può anche eseguire il pan e lo zoom come un telescopio

parametri ViewBox

Controlliamo il viewBox aggiungendolo come attributo al svg elemento, con un valore che comprende quattro numeri separati dallo spazio:

viewBox =    

I primi due numeri definiscono la posizione del viewBox, che penseremo come "panning". Gli ultimi due numeri definiscono le dimensioni del viewBox, che penseremo come "zoomare".

Nota: così come il svg elemento, il viewBox l'attributo può essere utilizzato anche sugli elementi simbolo, marcatore, modello e vista.

Zoom

Inizieremo guardando "zoom", che possiamo fare con gli ultimi due viewBox parametri: larghezza e altezza rispettivamente. Lasciamo i primi due parametri a 0 0 per adesso.

Se questi ultimi due parametri hanno le stesse dimensioni del viewport, non ci sono zoom avanti o indietro, quindi non cambia nulla. Dai uno sguardo a SVG numero 3 per esempio:

Ma se rendiamo questi due numeri più grandi delle dimensioni del viewport, faremo lo zoom in modo efficace e, se li ridimensioneremo, aumenteremo lo zoom.

In SVG numero 4 nell'esempio sopra abbiamo impostato il viewBox larghezza e altezza a 100, che è il doppio della dimensione della nostra finestra. Questo "ingrandisce" e mostra il doppio del contenuto, rivelando nuovamente l'intero cerchio.

Nel quinto SVG nostro viewBox è impostato su a larghezza e altezza di 25, che è la metà della dimensione della nostra finestra. Questo "ingrandisce", mostrando la metà della quantità di contenuto.

panoramica

I primi due viewBox i parametri ti permettono di "pan" impostando dove l'angolo in alto a sinistra del viewBox dovrebbe essere. Il primo numero controlla la posizione orizzontale e il secondo controlla la posizione verticale.

• Per eseguire una panoramica a destra, aumentare il primo numero. 
• Per spostarsi a sinistra, diminuire il primo numero.
• Per eseguire una panoramica, aumentare il secondo numero. 
• Per eseguire la panoramica, diminuire il secondo numero.

Dai un'occhiata a come funziona questo panning in questo esempio. Per ricordarti, SVG numero 3 ha a 50 di 50 vista, il viewBox viene aggiunto ma senza zoom o zoom. Il numero 6 è lo stesso, ma spostato a destra e in basso:

Panoramica e zoom insieme

Puoi, naturalmente, eseguire contemporaneamente il pan e lo zoom, utilizzando tutti e quattro i parametri contemporaneamente, ad esempio:

Quando usi viewBox, imposta la tua vista

Ogni volta che usi il viewBox attributo, ricorda di impostare anche le dimensioni della tua finestra. Se non lo fai, verrà impostato su 100% e probabilmente avrai un grafico di grandi dimensioni:

In poche parole

Facciamo bollire tutto in alcuni punti elenco:

• Il viewport è come una finestra che si guarda attraverso per vedere il contenuto di un SVG.
• Il viewBox è simile al viewport, ma puoi anche usarlo per "pan" e "zoom" come un telescopio.
• Controlla la vista tramite larghezza e altezza parametri sul svg elemento.
• Controlla la viewBox aggiungendo l'attributo viewBox al svg elemento. Può anche essere utilizzato sugli elementi simbolo, marcatore, modello e vista.
• Il viewBox il valore dell'attributo è composto da quattro parametri separati dallo spazio.
• I primi due viewBox parametri di controllo "panning" e gli ultimi due controlli "zoom".
• Aumenta il primo parametro a "pan" a destra, riduci a "pan" a sinistra.
• Aumenta il secondo parametro fino a "pan" verso il basso, diminuisci a "pan" verso l'alto.
• Fare il viewBox dimensioni, ovvero gli ultimi due parametri, più grandi di quelli della finestra per "rimpicciolire" e più piccoli per "ingrandire".

Spero che questo aiuti a chiarire le acque a volte oscure di SVG viewport e viewBox. Creazione SVG felice!

Ulteriori informazioni su SVG