Viewbox is een kenmerk dat vaak wordt gebruikt bij het maken van SVG-shapes. Als u het document als een canvas beschouwt, maakt het weergavevak deel uit van het canvas dat u de kijker wilt laten zien. Hoewel de pagina het volledige computerscherm kan bestrijken, bestaat de afbeelding mogelijk slechts in een derde van het geheel.
Met Viewbox kun je de parser vertellen om in te zoomen op die derde. Het elimineert de extra witte ruimte. Denk aan View Box als een virtuele benadering om een afbeelding bij te snijden. Zonder deze afbeelding verschijnt uw afbeelding een derde van de werkelijke grootte.
Viewbox-waarden
Als u een afbeelding wilt bijsnijden, moet u punten op de afbeelding maken om de sneden te maken. Hetzelfde geldt voor het gebruik van het kenmerk View Box. De waarde-instellingen voor viewbox omvatten:
brutale meid-De begin x coördinaatminy-De begincoördinaatbreedte-Breedte van de viewboxhoogte-Hoogte van de kijkdoos
De syntaxis voor weergaveboxwaarden is:
viewBox = "0 0 200 150"
Verwar de breedte en hoogte van het aanzichtvak niet met de breedte en hoogte die u instelt voor het SVG-document. Wanneer u een SVG-bestand maakt, is een van de eerste waarden die u vaststelt de breedte en hoogte van het document. Het document is een canvas. Het weergavevak kan het volledige canvas beslaan of slechts een deel ervan.
Dit weergavevak omvat de volledige pagina.
Dit weergaveveld beslaat de helft van de pagina die begint in de rechterbovenhoek.
Je vorm heeft ook hoogte- en breedtetoewijzingen.
Het is een document dat 800 x 400 px beslaat met een viewbox die begint in de rechterbovenhoek en de helft van de pagina vergroot. De vorm is een rechthoek die begint in de rechterbovenhoek van het weergavevak en die 100 px naar links en 50 px naar beneden beweegt.
Waarom een Viewbox instellen?
SVG doet veel meer dan alleen een vorm tekenen. Het kan een cijfer bovenop een ander creëren voor een schaduweffect. Het kan een vorm transformeren zodat deze in één richting kantelt. Voor de geavanceerde filters moet u het kenmerk View Box begrijpen en gebruiken.
