Viewbox è un attributo comunemente usato durante la creazione di forme SVG. Se si pensa al documento come una tela, la finestra di visualizzazione fa parte dell'area di disegno che si desidera visualizzare. Anche se la pagina può coprire l'intero schermo del computer, la figura può esistere solo in un terzo del tutto.
Viewbox ti permette di dire al parser di ingrandire quel terzo. Elimina lo spazio bianco extra. Pensa a view box come a un approccio virtuale per ritagliare un'immagine. Senza di esso, il tuo grafico apparirà un terzo della sua dimensione reale.
Valori della Viewbox
Per ritagliare un'immagine, devi creare dei punti sull'immagine per effettuare i tagli. Lo stesso è vero quando si usa l'attributo box vista. Le impostazioni del valore per viewbox includono:
civetta-La coordinata x inizialeminy-La coordinata iniziale ylarghezza-Width della viewboxaltezza-Altezza della viewbox
La sintassi per i valori della casella di visualizzazione è:
viewBox = "0 0 200 150"
Non confondere la larghezza e l'altezza della casella di visualizzazione con la larghezza e l'altezza impostate per il documento SVG. Quando si crea un file SVG, uno dei primi valori che si stabilisce è la larghezza e l'altezza del documento. Il documento è una tela. La finestra di visualizzazione può coprire l'intera tela o solo una parte di essa.
Questa finestra di visualizzazione copre l'intera pagina.
Questa finestra di visualizzazione copre metà pagina a partire dall'angolo in alto a destra.
La tua forma ha anche assegnazioni di altezza e larghezza.
È un documento che copre 800 x 400 px con una viewbox che inizia nell'angolo in alto a destra e espande metà della pagina. La forma è un rettangolo che inizia nell'angolo in alto a destra della finestra di visualizzazione e sposta 100 px verso sinistra e 50 px verso il basso.
Perché impostare una Viewbox?
SVG fa molto di più che disegnare una forma. Può creare una figura sopra l'altra per un effetto ombra. Può trasformare una forma in modo che si inclini in una direzione. Per i filtri avanzati, è necessario comprendere e utilizzare l'attributo della casella di visualizzazione.
