Viewbox er et attributt som ofte brukes når du lager SVG-former. Hvis du tenker på dokumentet som lerret, er visningsboksen en del av lerretet du vil seeren skal se. Selv om siden kan dekke hele dataskjermen, kan figuren bare eksistere i en tredjedel av helheten.
Viewbox lar deg fortelle parseren å zoome inn på den tredje. Det eliminerer den ekstra hvite plassen. Tenk på visningsboksen som en virtuell tilnærming til å beskjære et bilde. Uten den vises grafikken din en tredjedel av den faktiske størrelsen.
Visningsboksverdier
For å beskjære et bilde må du opprette poeng på bildet for å gjøre kuttene. Det samme gjelder når du bruker visningsboksattributtet. Verdiene for visningsboksen inkluderer:
Minx-Begynnelsen x koordinatminy-Begynnens y-koordinatbredde-Bredden til visningsboksenhøyde-Høyde i visningsboksen
Syntaxen for visning av boksverdier er:
viewBox = "0 0 200 150"
Ikke bland bredden og høyden på visningsboksen med bredden og høyden du angir for SVG-dokumentet. Når du oppretter en SVG-fil, er en av de første verdiene du oppretter dokumentbredden og høyden. Dokumentet er et lerret. Visningsboksen kan dekke hele lerretet eller bare en del av det.
Denne visningsboksen dekker hele siden.
Denne visningsboksen dekker halvparten av siden som begynner i øvre høyre hjørne.
Din form har også høyde- og breddeoppgaver.
Det er et dokument som dekker 800 x 400 px med en visningsboks som starter øverst til høyre og utvider halvparten av siden. Formen er et rektangel som begynner i øvre høyre hjørne av visningsboksen og beveger 100 px til venstre og 50 px ned.
Hvorfor sette en Viewbox?
SVG gjør mye mer enn bare tegne en form. Det kan skape en figur på toppen av en annen for en skyggeeffekt. Det kan forvandle en form slik at den glir i en retning. For de avanserte filtre må du forstå og bruke visningsboksattributtet.
