'N Webontwerpgids vir die gebruik van' SVG 'Viewbox (HTML)
Viewbox is 'n kenmerk wat algemeen gebruik word wanneer SVG- vorms geskep word. As jy aan die dokument dink as 'n doek, is die vertoningsvak deel van die seil wat jy wil hê die kyker moet sien. Alhoewel die bladsy die hele rekenaarskerm kan dek, kan die figuur slegs in 'n derde van die geheel bestaan.
Viewbox laat jou toe om die parser te vertel om op daardie derde in te zoem. Dit elimineer die ekstra wit spasie. Dink aan die oogkassie as 'n virtuele benadering om 'n beeld te sny.
Sonder dit sal jou grafieke 'n derde van sy werklike grootte vertoon.
Viewbox Waardes
Om 'n beeld te sny, moet jy punte op die prent skep om die snitte te maak. Dieselfde geld ook vir die gebruik van die eienskap van die sigboks. Die waarde-instellings vir Viewbox sluit in:
- minx-die begin x koördinaat
- miny-die begin y koördineer
- breedte-breedte van die kyker
- hoogte-hoogte van die uitsigkassie
Die sintaksis vir die waarskuwings van die vertoningskassie is:
viewBox = "0 0 200 150"
Moenie die breedte en hoogte van die aansigkassie verwar met die breedte en hoogte wat u vir die SVG- dokument gestel het nie. Wanneer u 'n SVG-lêer skep, is een van die eerste waardes wat u opstel die dokument breedte en hoogte. Die dokument is 'n doek. Die vertoning boks kan die hele doek bedek of net 'n gedeelte daarvan.
Hierdie aansig boks dek die hele bladsy.
Hierdie aansigkassie dek die helfte van die bladsy wat in die boonste regterhoek begin.
Jou vorm het ook hoogte- en breedteopdragte.
Dit is 'n dokument wat 800 x 400 px dek met 'n kijkboks wat in die boonste regterkantste hoek begin en die helfte van die bladsy uitbrei. Die vorm is 'n reghoek wat begin in die boonste regterkantste hoek van die vertoningsvak en beweeg 100 px na links en 50 px af.
Hoekom Stel 'n Viewbox?
SVG doen veel meer as net 'n vorm. Dit kan een figuur bo-op 'n ander skep vir 'n skaduwee-effek. Dit kan 'n vorm verander sodat dit in een rigting kantel. Vir die gevorderde filters moet u die kenmerk van die vertoningskassie verstaan en gebruik.