attributo svg viewBox

Sto imparando svg dai suoi documenti ufficiali, c’è una tale linea. Non capisco, se ha già un attributo width e height , che senso ha specificarlo di nuovo in viewBox="0 0 1500 1000" ? Si dice, “L’unità di un px è definita per essere uguale a un’unità di un utente.Quindi, una lunghezza di” 5px “è uguale a una lunghezza di” 5 “” nei documenti ufficiali, quindi questo viewBox è largo 1500px e Vista altezza 1000, che supera 300 px e 200 px. Quindi perché definisce il valore di larghezza e altezza in primo luogo?

   

La larghezza e l’altezza sono quanto è grande il . ViewBox controlla come vengono visualizzati i suoi contenuti in modo che viewBox = “0 0 1500 1000” ridimensiona il contenuto dell’elemento di un fattore di 5 (1500/300 = 5 e 1000/200 = 5) e il contenuto sarà essere 1/5 della dimensione che sarebbero senza il viewBox ma il

Immagina di avere una superficie elastica e tagliarla in 4 pezzi uguali. Se passi 3 pezzi, hai una superficie pari a 1/4 della superficie originale. Se ora estendi la superficie e la fai della stessa dimensione della superficie originale, tutto sulla superficie sarà il doppio della dimensione. Ecco come ViewBox e larghezza / altezza sono correlati.

Se non si specifica una viewbox, si presume che tutti i numeri senza unità in un elemento siano pixel. (e SVG assume 90 dpi o pixel per pollice per la conversione da unità come cm a pixel.)

Una viewbox consente di creare numeri senza unità in elementi che significano “unità utente” e specifica in che modo tali unità sono mappate alla dimensione. Per semplicità, considera solo le coordinate x, cioè un righello. La tua viewbox dice che il tuo righello avrà 1500 unità per abbinare la larghezza di 200 pixel della svg.

Un elemento di linea compreso tra 0 e 1500 (senza unità, ovvero le unità utente) allungherebbe 200 pixel come disegnati, cioè attraverso la larghezza del disegno svg.

(E dal momento che SVG è scalabile senza perdita di risoluzione, i pixel in realtà non significano molto nel mondo reale, quando un utente esegue lo zoom avanti o indietro.)

È una trasformazione coordinata, di sorta.

Ti suggerisco di imparare da un libro come “SVG Essentials”, circa $ 10 usati, da cui tratto vagamente questa risposta.

Di default

  

il “righello” della griglia svg è in pixel (tutte le forms in cui svg è misurato in pixel)

Ma tu vuoi usare le tue unità puoi usare viewBox attr per questo:

  

Questo significa:

asse orizzontale: 1500 (unità larghezza) = 300px => 1 (unità larghezza) = 300 / 1500px = 1 / 5px

asse verticale: 1000 (l’unità di altezza) = 200px => 1 (l’unità di altezza) = 200 / 1000px = 1 / 5px

  • Ora tutte le forms in svg verranno ridimensionate:

la loro ampiezza scala a 1 / 5px (1/5 <1 => scala verso il basso) rispetto all’origine.

anche le loro altezze si ridimensionano a 1/5px (1/5 <1 => riduci) confrontando l’origine