Webes tervezési útmutató az 'SVG' Viewbox (HTML) használatához
A Viewbox egy olyan attribútum, amelyet az SVG formák létrehozásakor gyakran használnak. Ha a dokumentumot vászonként gondoljuk, akkor a nézetablak a vászon részét képezi, amelyet a néző látni szeretne. Annak ellenére, hogy az oldal kiterjedhet a teljes számítógép képernyőjére, az ábrán csak az egész harmadik része lehet.
A Viewbox lehetővé teszi, hogy megmondja az elemzővel, hogy nagyítsa ki azt a harmadik részt. Ez kiküszöböli az extra fehér helyet. Gondolja át a nézetablakot virtuális megközelítésként a kép elvágásához.
Anélkül, hogy a grafika megjelenik a tényleges méretének egyharmadán.
Viewbox értékek
A kép elvágásához pontokat kell létrehoznia a képen a vágások végrehajtásához. Ugyanez igaz a nézetablak-attribútum használatakor. A Viewbox értékbeállításai a következők:
- minx - az x kezdeti koordináta
- miny - az elején y koordináta
- szélesség-szélesség a nézetablakban
- a nézetablak magassága
A nézetablak értékek szintaxisa:
viewBox = "0 0 200 150"
Ne tévessze össze a nézetablak szélességét és magasságát az SVG dokumentumhoz beállított szélességgel és magassággal. SVG-fájl létrehozásakor az első létrehozott értékek egyike a dokumentum szélessége és magassága. A dokumentum vászon. A nézetablak a teljes vásznat vagy csak egy részét fedheti le.
Ez a nézetablak az egész oldalt jeleníti meg.
Ez a nézetablak a jobb felső sarokban kezdődő oldal felét fedezi.
Az alakodnak magassági és szélességi hozzárendelése is van.
Ez egy olyan dokumentum, amely 800 x 400 képpontot tartalmaz, a jobb felső sarokban elinduló nézetablakkal, és az oldal felét felemeli. Az alakzat egy téglalap, amely a nézetablak jobb felső sarkában kezdődik, és a 100-as pólus balra mozog és 50-szerese lefelé.
Miért állít be egy nézetablakot?
Az SVG sokkal többet, mint egy alakot rajzol. Az árnyékhatás érdekében egy alakot hozhat létre a másik tetején. Az alakot úgy alakíthatja át, hogy az egyik irányban elforduljon. A fejlett szűrők esetében meg kell értened és használni a nézetablak-attribútumot.