Ako porozumieť atribútu Viewbox v SVG

Príručka pre návrh webových stránok na použitie prehliadača SVG Viewbox (HTML)

Viewbox je atribút bežne používaný pri vytváraní tvarov SVG . Ak si myslíte, že dokument je plátno, zobrazenie je súčasťou plátna, ktoré chcete zobraziť divákovi. Hoci stránka môže pokrývať celú obrazovku počítača, tento údaj môže existovať iba v jednej tretine celku.

Viewbox umožňuje analyzátorovi analyzovať zväčšenie tretej obrazovky. Odstráni extra biely priestor. Považujte zobrazenie za virtuálny prístup k orezaniu obrázka.

Bez neho sa vaša grafika zobrazí tretine skutočnej veľkosti.

Hodnoty prehliadača

Ak chcete orezať obrázok, musíte vytvoriť body na obrázku, aby ste urobili rezy. To isté platí aj pri použití atribútu zobrazovacieho poľa. Nastavenia hodnôt pre zobrazovacie pole zahŕňajú:

Syntax pre hodnoty zobrazovacieho poľa je:

viewBox = "0 0 200 150"

Nezamieňajte šírku a výšku zobrazovacieho poľa so šírkou a výškou, ktoré ste nastavili pre dokument SVG . Keď vytvoríte súbor SVG, jednou z prvých hodnôt, ktoré vytvoríte, je šírka a výška dokumentu. Dokument je plátno. Zobrazovacie pole môže pokryť celé plátno alebo len jeho časť.

Tento pohľad zobrazuje celú stránku.

Toto pohľadové pole pokrýva polovicu stránky, ktorá začína v pravom hornom rohu.

Váš tvar má tiež priradenie výšky a šírky.


Ide o dokument, ktorý pokrýva rozmer 800 x 400 px s pohľadom, ktorý začína v pravom hornom rohu a rozširuje polovicu stránky. Tvar je obdĺžnik, ktorý začína v pravom hornom rohu zobrazovacieho poľa a presúva 100 px doľava a 50 pixelov nadol.

Prečo nastaviť ukážku?

SVG robí oveľa viac než len kreslenie tvaru. Môže vytvoriť jeden obrázok na začiatku druhého pre tieňový efekt. Môže premeniť tvar tak, aby sa naklonil jedným smerom. Pokročilé filtre vám budú chápať a používať atribút boxu.