Kako razumjeti atribut preglednika u SVG

Vodič za izradu web stranica pomoću 'SVG' Viewbox (HTML)

Viewbox je atribut koji se obično koristi prilikom izrade SVG oblika. Ako mislite o dokumentu kao platnu, okvir za prikaz je dio platna kojeg želite da ga gledatelj vidi. Iako stranica može pokriti čitav zaslon računala, ta slika može postojati samo u trećini cjeline.

Prikazni okvir omogućuje vam da parseru prikažete trećinu. Uklanja dodatni bijeli prostor. Razmislite o okviru za prikaz kao virtualni pristup obrezivanju slike.

Bez nje, vaš će se grafički prikazati trećinom njezine stvarne veličine.

Vrijednosti preglednika

Da biste obrezali sliku, morate stvoriti točke na slici kako biste napravili rezove. Isto vrijedi i kada se koristi atribut okvira za prikaz. Postavke vrijednosti za okvir za pregled uključuju:

Sintaksa vrijednosti okvira za prikaz:

viewBox = "0 0 200 150"

Nemojte zbuniti širinu i visinu okvira za pregled sa širinom i visinom koju ste postavili za SVG dokument. Kada stvorite SVG datoteku, jedna od prvih vrijednosti koje postavite je širina i visina dokumenta. Dokument je platno. Okvir za prikaz može pokriti cijeli platno ili samo dio nje.

Ovaj okvir za prikaz pokriva cijelu stranicu.

Ovaj okvir za prikaz pokriva polovicu stranice koja počinje u gornjem desnom kutu.

Vaš oblik također ima visinu i širinu zadataka.


Riječ je o dokumentu koji pokriva 800 x 400 px sa preglednim okvirom koji počinje u gornjem desnom kutu i proširuje polovicu stranice. Oblik je pravokutnik koji počinje u gornjem desnom kutu okvira za prikaz i pomiče 100 px s lijeve strane i 50 px prema dolje.

Zašto postaviti okvir za prikaz?

SVG čini mnogo više nego samo nacrtati oblik. Može stvoriti jednu figuru na vrhu drugog za efekt sjena. Može transformirati oblik tako da se naginje u jednom smjeru. Za napredne filtre morat ćete razumjeti i upotrebljavati atribut okvira za prikaz.