Un ghid de design Web pentru a utiliza "SVG" Viewbox (HTML)
Viewbox este un atribut utilizat frecvent la crearea formelor SVG . Dacă vă gândiți la document ca pânză, caseta de vizualizare face parte din pânza pe care doriți să o vizualizeze spectatorul. Chiar dacă pagina poate acoperi întregul ecran al computerului, cifra poate exista doar la o treime din ansamblu.
Câmpul de vizualizare vă permite să spuneți parserului să mărească această treime. Elimină spațiul alb suplimentar. Gândiți-vă la caseta de vizualizare ca o abordare virtuală pentru a decupa o imagine.
Fără aceasta, graficul dvs. va apărea o treime din dimensiunea reală.
Valorile din Vizualizare
Pentru a decupa o imagine, trebuie să creați puncte pe imagine pentru a face tăieturile. Același lucru este valabil și atunci când utilizați atributul casetă de vizualizare. Setările de valoare pentru cutia de vizualizare includ:
- minx - începutul coordonatei x
- miny - începutul coordonatei y
- lățimea-lățimea căsuței de vizualizare
- înălțimea-înălțimea căsuței de vizualizare
Sintaxa pentru valorile casetă de vizualizare este:
viewBox = "0 0 200 150"
Nu confunda lățimea și înălțimea casetei de vizualizare cu lățimea și înălțimea setate pentru documentul SVG . Când creați un fișier SVG, una dintre primele valori pe care le stabiliți este lățimea și înălțimea documentelor. Documentul este o pânză. Caseta de vizualizare poate acoperi întreaga pânză sau doar o parte din ea.
Această casetă de vizualizare acoperă întreaga pagină.
Această casetă de vizualizare acoperă o jumătate de pagină care începe în colțul din dreapta sus.
Forma dvs. are, de asemenea, sarcini de înălțime și lățime.
Este un document care acoperă 800 x 400 px cu o căsuță de vizualizare care începe în colțul din dreapta sus și extinde jumătate din pagină. Forma este un dreptunghi care începe în colțul din dreapta sus al casetei de vizualizare și mută 100 de px spre stânga și 50 de grade în jos.
De ce să setați o vizualizare?
SVG face mult mai mult decât să deseneze o formă. Poate crea o cifră deasupra celeilalte pentru un efect de umbră. Se poate transforma o formă astfel încât să se încline într-o direcție. Pentru filtrele avansate, va trebui să înțelegeți și să utilizați atributul casetă de vizualizare.