Kako razumjeti atribut pogleda u SVG-u

Vodič za web dizajn za korištenje 'SVG' Viewbox-a (HTML)

Viewbox je atribut koji se obično koristi prilikom kreiranja SVG oblika. Ako razmišljate o dokumentu kao platnu, okvir za prikaz je deo platna koje želite da gledaoci vide. Iako stranica može pokriti celokupni ekran računara, slika može da postoji samo u trećini celine.

Viewbox vam omogućava da kažete parseru da zumira na toj trećini. Eliminiše dodatni beli prostor. Zamislite polje za prikaz kao virtualni pristup za obrezivanje slike.

Bez nje, vaša grafika će se pojaviti trećina stvarne veličine.

Vrednosti Viewbox

Da biste isecali sliku, morate napraviti tačke na slici da biste napravili rezove. Isto važi kada koristite atribut kvadratića prikaza. Podešavanja vrijednosti za okvir za pregled sadrže:

Sintaksa za vrijednosti polja prikaza je:

viewBox = "0 0 200 150"

Nemojte mešati širinu i visinu kutije sa prikazom širine i visine koju ste postavili za SVG dokument. Kada kreirate SVG datoteku, jedna od prvih vrednosti koje postavite je širina i visina dokumenta. Dokument je platno. Kutija za prikaz može pokriti celu platnu ili samo njegov deo.

Ovo polje za prikaz pokriva celu stranicu.

Ovo polje za prikaz pokriva pola stranice koja počinje u gornjem desnom uglu.

Vaš oblik takođe ima zadatke visine i širine.


To je dokument koji pokriva 800 x 400 piksela sa pogledom na okvir koji počinje u gornjem desnom uglu i proširuje polovinu stranice. Oblik je pravougaonik koji počinje u gornjem desnom uglu okvira za prikaz i pomera se 100 px ulevo i 50 piksela.

Zašto postaviti okvir za prikazivanje?

SVG čini mnogo više nego samo nacrtati oblik. Može da stvori jednu sliku na vrhu druge za efekt senke. Može da transformiše oblik tako da se naginje u jednom pravcu. Za napredne filtere, moraćete da razumete i koristite atribut kvadratića prikaza.