SVG Viewport og viewBox (for komplette nybegynnere)

I dette raske tipset skal vi bryte ned nøyaktig hva viewport og ViewBox er i SVG. Du lærer:

• Forskjellen mellom visningsporten og ViewBox
• Siktene på SVG-ene du kan kontrollere med hver
• Hvordan de blir brukt hver

La oss begynne!

SVG Viewport 

Hvis du bokstavelig talt bryter ordet "viewport" får du et snev om sin rolle i SVG; det skaper en "port" der du kan "vise" en del av en SVG. Du kan forestille deg dette som å være noe som ligner på et porthole-vindu som du kan se verden utover.

SVG-visningsporten er som et porthole-vindu, hvis størrelse bestemmer hva du kan se gjennom det

Som med et vindu, bestemmer størrelsen på visningsporten hvor mye du kan se, men det definerer ikke størrelsen på det som kan være synlig gjennom visningsporten. Det som på den andre siden kan teoretisk sett være noen størrelse i det hele tatt.

For eksempel kan du ha en form på grafikken din som er 100px av 100px, men hvis du setter visningsporten til 50 piksler av 50 piksler Du ser bare en del av den formen. Visningsstørrelsen er satt ved å legge til bredde og høyde attributter til svg element, slik som:

I den første SVG ser vi hele 100px av 100px sirkel, men i den andre SVG når vi setter vår visningsportstørrelse til 50 piksler av 50 piksler vi ser bare et fjerdedel av sirkelen.

SVG viewBox

De ViewBox kan tenkes like mye som visningsporten, men med to ekstra funksjoner: den kan "panorere" og den kan "zoome". Bygg på "se gjennom glass" -analogi, hvis visningsporten er som et vindu, vil ViewBox er som et teleskop.

SVG viewBox er veldig lik visningsporten, men den kan også panorere og zoome som et teleskop

viewBox Parameters

Vi kontrollerer ViewBox ved å legge den til som et attributt til svg element, med en verdi som består av fire plassavskilte tall:

viewBox =    

De to første tallene definerer posisjonen til ViewBox, som vi vil tenke på som "panorering". De to siste tallene definerer dimensjonene til ViewBox, som vi tenker på som "zooming".

Merk: samt svg element, the ViewBox Attributt kan også brukes på elementene symbol, markør, mønster og utsikt.

zooming

Vi starter med å se på "zoome", som vi kan gjøre med de to siste ViewBox parametere: bredde og høyde henholdsvis. Vi legger de to første parameterne til 0 0 for nå.

Hvis de to siste parameterne har samme dimensjoner som visningsporten, er det ingen zooming inn eller ut, slik at ingenting endres. Ta en titt på SVG nummer 3 for eksempel:

Men hvis vi gjør disse to tallene større enn visningsdimensjonene, zoomer vi effektivt ut, og hvis vi gjør dem mindre, zoomer vi inn.

I SVG nummer 4 i eksemplet ovenfor har vi satt ViewBox bredde og høyde til 100, som er dobbelt så stor som vår visningsport. Dette "zoomer ut" og viser dobbelt innholdet, og derved gjenåpner hele sirkelen.

I den femte SVG vår ViewBox er satt til a bredde og høyde av 25, som er halvparten av størrelsen på visningsporten vår. Dette "zoomer inn", og viser halvparten av innholdet.

panorering

De to første ViewBox Parametere lar deg "panorere" ved å angi hvor øvre venstre hjørne av ViewBox bør være. Det første nummeret styrer den horisontale posisjonen, og den andre styrer vertikal posisjon.

• For å panorere til høyre, øk det første nummeret. 
• For å panorere til venstre, reduser du det første nummeret.
• For å panorere ned, øk det andre nummeret. 
• For å panorere opp, senk det andre nummeret.

Ta en titt på hvordan denne panorering fungerer i dette eksemplet. For å minne deg på, har SVG nummer 3 a 50 av 50 viewport, the ViewBox er lagt til, men uten panorering eller zooming. Nummer 6 er det samme, men pannet til høyre og ned:

Panning og zooming sammen

Du kan selvfølgelig både panorere og zoome samtidig, ved å bruke alle fire parametrene samtidig, for eksempel:

Når du bruker viewBox, Angi Viewport

Når du bruker ViewBox attributt, husk å angi visningsportmålene dine også. Hvis du ikke gjør det, vil de standard til 100%, og du vil sannsynligvis ha en overdimensjonert grafikk:

I et nøtteskall

La oss koker alt ned i noen punkter:

• Visningsporten er som et vindu du ser gjennom for å se et SVGs innhold.
• De ViewBox ligner på visningsporten, men du kan også bruke den til å "panorere" og "zoome" som et teleskop.
• Kontroller visningsporten via bredde og høyde parametere på svg element.
• Kontroller visningsboksen ved å legge til attributtet ViewBox til svg element. Det kan også brukes på elementene symbol, markør, mønster og utsikt.
• De ViewBox Attributtens verdi består av fire mellomromparametere.
• De to første ViewBox parametere kontroller "panning" og de to siste kontrollen "zooming".
• Øk den første parameteren til "pan" til høyre, senk den til "pan" til venstre.
• Øk den andre parameteren til å "panorere" ned, reduser den til "pan" opp.
• Lage ViewBox dimensjoner, dvs. de to siste parameterne, større enn visningstallet for å "zoome ut" og mindre for å "zoome inn".

Jeg håper det bidrar til å klargjøre SVGs noen ganger mørke farvann view og ViewBox. Glad SVG skaper!

Mer SVG Grunnleggende