Jak porozumět atributu Viewbox v SVG

Průvodce tvorbou webových stránek pro použití prohlížeče SVG Viewbox (HTML)

Viewbox je atribut běžně používaný při vytváření tvarů SVG . Pokud si myslíte, že dokument je plátno, je zobrazovací rámeček součástí plátna, které chcete prohlížeč vidět. Přestože stránka může pokrývat celou obrazovku počítače, může existovat pouze jedna třetina.

Viewbox umožňuje analyzátoru analyzovat přiblížení na tuto třetinu. Vylučuje extra bílý prostor. Přemýšlejte o zobrazení pole jako o virtuálním přístupu k oříznutí obrázku.

Bez ní se vaše grafika zobrazí třetině skutečné velikosti.

Hodnoty v zobrazeních

Chcete-li oříznout obrázek, musíte vytvořit body na obrázku, abyste provedli řezy. Totéž platí při použití atributu pohledu. Hodnota nastavení pro zobrazení obsahuje:

Syntaxe hodnot zobrazovacích políček je:

viewBox = "0 0 200 150"

Nezaměňujte šířku a výšku zobrazovacího rámečku o šířce a výšce, které jste nastavili pro dokument SVG . Když vytvoříte soubor SVG, jednou z prvních hodnot, které vytvoříte, je šířka a výška dokumentu. Dokument je plátno. Zobrazovací pole může pokrýt celé plátno nebo jen jeho část.

Toto pole zobrazení zahrnuje celou stránku.

Toto pole zobrazení pokrývá polovinu stránky začínající v pravém horním rohu stránky.

Váš tvar má také přiřazení výšky a šířky.


Jedná se o dokument, který pokrývá 800 x 400 pixelů s oknem, který se spouští v pravém horním rohu a rozšiřuje polovinu stránky. Tvar je obdélník, který začíná v pravém horním rohu pole pro zobrazení a pohybuje se 100 px doleva a 50 pixelů dolů.

Proč nastavit zobrazení?

SVG dělá mnohem víc než jen nakreslit tvar. Pro stínový efekt může vytvořit jednu postavu na druhou stranu. Může přeměnit tvar tak, aby se naklonil v jednom směru. Pro pokročilé filtry budete chtít pochopit a používat atribut okna zobrazení.