SVG Viewport och viewBox (för fullständiga nybörjare)

I det här snabba tipset kommer vi att bryta ner exakt vad viewport och viewBox finns i SVG. Du lär dig:

• Skillnaden mellan visningsporten och viewBox
• De aspekter av dina SVG som du kan styra med var och en
• Hur de appliceras vardera

Låt oss börja!

SVG Viewport 

Om du bokstavligen bryter ner ordet "viewport" får du en aning om sin roll i SVG; det skapar en "port" genom vilken du kan "visa" en del av en SVG. Man kan föreställa sig detta som att vara något som är likartat med ett porthole-fönster genom vilket man kan se världen bortom.

SVG-visningsporten är som ett farkostfönster vars storlek bestämmer vad du kan se genom det

Som med ett fönster bestämmer visningsportens storlek hur mycket du kan se, men det definierar inte storleken på vad som helst som kan vara synligt genom det visningsporten. Det som finns på andra sidan kan teoretiskt sett vara någon storlek alls.

Du kan till exempel ha en form på din grafik som är 100px av 100px, men om du ställer in visningsporten till x 50 bildpunkter av x 50 bildpunkter Du ser bara en del av den formen. Visningsstorleken ställs in genom att lägga till bredd och höjd attribut till svg element, som så:

I den första SVG ser vi hela 100px av 100px cirkel, men i den andra SVG när vi sätter vår viewport storlek till x 50 bildpunkter av x 50 bildpunkter vi ser bara en fjärdedel av cirkeln.

SVG viewBox

De viewBox kan betraktas lika mycket som visningsporten men med två extrafunktioner: det kan "panorera" och det kan "zooma". Att bygga på "look through glass" -analogen, om visningsporten är som ett fönster, viewBox är som ett teleskop.

SVG viewBox är mycket lik viewporten, men den kan också panorera och zooma som ett teleskop

viewBox Parametrar

Vi kontrollerar viewBox genom att lägga till det som ett attribut till svg element, med ett värde som innefattar fyra rymdseparerade nummer:

viewBox =    

De två första siffrorna definierar positionen för viewBox, som vi kommer att tänka på som "panorering". De två sista siffrorna definierar dimensionerna av viewBox, som vi kommer att tänka på som "zooma".

Notera: så väl som svg element, the viewBox attributet kan också användas på elementen symbol, markör, mönster och se.

zoomning

Vi börjar med att titta på "zooma", vilket vi kan göra med de två sista viewBox parameters: bredd och höjd respektive. Vi lämnar de två första parametrarna vid 0 0 tills vidare.

Om de två sista parametrarna har samma dimensioner som visningsporten, är det ingen zoomning in eller ut så ingenting ändras. Ta en titt på SVG nummer 3 till exempel:

Men om vi gör de två siffrorna större än visningsdimensionerna, zoomar vi effektivt ut, och om vi gör dem mindre zoomar vi in.

I SVG nummer 4 i exemplet ovan har vi satt viewBox bredd och höjd till 100, vilket är dubbelt så stort som vårt visningsort. Detta "zoomar ut" och visar dubbelt innehåll, vilket igen avslöjar hela cirkeln.

I den femte SVG vår viewBox är inställd på a bredd och höjd av 25, vilket är halva storleken på vårt vyer. Detta "zoomar in" och visar hälften av innehållet.

panorering

De första två viewBox parametrar tillåter dig att "panorera" genom att ställa in var det övre vänstra hörnet av viewBox borde vara. Det första numret styr det horisontella läget, och det andra styr det vertikala läget.

• För att panorera till höger, öka det första numret. 
• För att panorera till vänster, minska det första numret.
• För att panorera ner, öka det andra numret. 
• För att panorera upp, minska det andra numret.

Ta en titt på hur denna panning fungerar i det här exemplet. För att påminna dig har SVG nummer 3 en 50 av 50 viewport, the viewBox läggs till men utan panning eller zoomning. Nummer 6 är detsamma, men pannat åt höger och neråt:

Panorering och zoomning tillsammans

Du kan naturligtvis både panorera och zooma samtidigt, genom att använda alla fyra parametrarna på en gång, till exempel:

När du använder ViewBox, ställ in din Viewport

När du använder viewBox attribut, kom ihåg att ställa in dina visningsdimensioner också. Om du inte gör det, kommer de som standard till 100% och du kommer sannolikt att ha en stor bild:

I ett nötskal

Låt oss koka allt ner i några punkter:

• Visningsporten är som ett fönster du tittar på för att se ett SVGs innehåll.
• De viewBox liknar visningsporten, men du kan också använda den för att "panorera" och "zooma" som ett teleskop.
• Styr visningsporten via bredd och höjd parametrar på svg element.
• Kontrollera visningsboxen genom att lägga till attributet viewBox till svg element. Det kan också användas på elementen symbol, markör, mönster och se.
• De viewBox Attributets värde består av fyra separata parametrar.
• De första två viewBox parametrarna styr "panning" och de två sista kontrollerna "zoomning".
• Öka den första parametern till "pan" rätt, minska den till "pan" till vänster.
• Öka den andra parametern till "pan" ner, minska den till "pan" upp.
• Gör viewBox dimensioner, dvs de två sista parametrarna, större än de i visningsporten för att "zooma ut" och mindre för att "zooma in".

Jag hoppas det hjälper till att klargöra SVG: s ibland skumma vatten visningsområde och viewBox. Glad SVG skapande!

Mer SVG Basics