svg viewBox attributo

Question

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 come 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 1500 px e 1000 altezza vista, che supera 300 px e 200 px. Quindi perché definisce il valore di larghezza e altezza in primo luogo?

<svg width="300px" height="200px" version="1.1" 
     viewBox="0 0 1500 1000" preserveAspectRatio="none" 
     xmlns="http://www.w3.org/2000/svg"> 

Answer 1

La larghezza e l'altezza sono quanto grande sia il <svg> è. ViewBox controlla come viene visualizzato il suo contenuto in modo che viewBox = "0 0 1500 1000" riduca il contenuto dell'elemento <svg> di un fattore di 5 (1500/300 = 5 e 1000/200 = 5) e il contenuto sarà 1/5 la dimensione che sarebbero senza il viewBox ma il <svg>

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.

Answer 2

Se non si specifica una casella di visualizzazione, 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 il modo in cui 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 unità utente) estenderebbe 200 pixel come disegnato, cioè attraverso la larghezza del disegno svg.

(E poiché SVG è scalabile senza perdita di risoluzione, i pixel in realtà non significano molto nel mondo reale, quando un utente ingrandisce o si riduce.)

sua una trasformazione di coordinate, di sorta.

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

Answer 3

Per impostazione predefinita

<svg width="300" height="200"> 

il "principe" della svg griglia è in pixel (tutte le forme in cui SVG si misura in pixel)

ma si desidera utilizzare le tue unità è possibile utilizzare viewBox attr per questo:

<svg width="300" height="200" viewBox="0 0 1500 1000"> 

ciò significa:

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

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

• Ora tutte le forme del svg scaleranno:

loro larghezza scalabili in 1/5px (1/5 < 1 => scala verso il basso) confrontando all'origine.

loro altezze scala anche a 1/5px (1/5 < 1 => ridimensionare) il confronto all'origine