Share
In deze snelle tip gaan we precies opsplitsen welke viewport en Viewbox staan in SVG. Je zal leren:
Accentsconagua
Viewbox Laten we beginnen!
Als u letterlijk het woord "viewport" opslaat, krijgt u een hint over zijn rol in SVG; het creëert een "poort" waarmee u een sectie van een SVG kunt "bekijken". Je kunt je voorstellen dat dit iets is dat lijkt op een patrijspoort waardoor je de wereld daarachter kunt zien.
De SVG-viewport is als een venster met een patrijspoort waarvan de grootte bepaalt wat u er doorheen kunt zienNet als bij een venster, bepaalt de grootte van het kijkvenster hoeveel u kunt zien, maar het bepaalt niet de grootte van wat er via dat venster zichtbaar is. Wat aan de andere kant is, zou theoretisch in elk formaat kunnen zijn.
U hebt bijvoorbeeld misschien een vorm in uw afbeelding 100px door 100px, maar als je de viewport instelt op 50px door 50px je ziet alleen een deel van die vorm. De viewport-grootte wordt ingesteld door toe te voegen breedte en hoogte attributen aan de svg element, zoals zo:
In de eerste SVG zien we het geheel 100px door 100px cirkel, maar in de tweede SVG wanneer we de grootte van onze viewport instellen 50px door 50px we zien slechts een kwart van de cirkel.
De Viewbox kan net zo worden gedacht als de viewport, maar met twee extra functies: het kan "pannen" en het kan "zoomen". Voortbouwend op de "doorkijkglas" -analogie, als het kijkvenster als een venster is, de Viewbox is als een telescoop.
De SVG-viewBox lijkt sterk op de viewport, maar kan ook pannen en zoomen zoals een telescoopWij beheersen de Viewbox door het toe te voegen als een attribuut aan de svg element, met een waarde bestaande uit vier spaties gescheiden nummers:
viewBox =
De eerste twee getallen bepalen de positie van de Viewbox, die we zullen beschouwen als "panning". De laatste twee getallen definiëren de dimensies van de Viewbox, die we zullen noemen als "zoomen".
Notitie: net als de svg element, de Viewbox kenmerk kan ook op de elementen worden gebruikt symbool, markeerstift, patroon en uitzicht.
We beginnen met kijken naar "zoomen", wat we kunnen doen met de laatste twee Viewbox parameters: breedte en hoogte respectievelijk. We laten de eerste twee parameters over 0 0 voor nu.
Als die laatste twee parameters dezelfde afmetingen hebben als de viewport, kunt u niet in- of uitzoomen, dus er verandert niets. Bekijk SVG nummer 3 bijvoorbeeld:
Maar als we die twee getallen groter maken dan de afmetingen van de viewport, zullen we effectief uitzoomen en als we ze kleiner maken, zullen we inzoomen.
In SVG nummer 4 in het bovenstaande voorbeeld hebben we de Viewbox breedte en hoogte naar 100, die dubbel zo groot is als onze viewport. Deze "zoomt uit" en toont de dubbele inhoud, waardoor de hele cirkel opnieuw wordt onthuld.
In de vijfde SVG onze Viewbox is ingesteld op a breedte en hoogte van 25, die half zo groot is als onze viewport. Deze zoomt in en toont de helft van de hoeveelheid inhoud.
De eerste twee Viewbox Met parameters kunt u "pannen" door in te stellen waar de linkerbovenhoek van de Viewbox zou moeten zijn. Het eerste nummer regelt de horizontale positie en de tweede regelt de verticale positie.
Bekijk hoe deze panning werkt in dit voorbeeld. Ter herinnering, SVG nummer 3 heeft een 50 door 50 kijkvenster, de Viewbox is toegevoegd, maar zonder pannen of zoomen. Nummer 6 is hetzelfde, maar naar rechts en naar beneden gepanned:
U kunt natuurlijk tegelijk pannen en zoomen, door alle vier parameters tegelijkertijd te gebruiken, bijvoorbeeld:
Wanneer u de Viewbox attribuut, vergeet niet om ook uw viewport-dimensies in te stellen. Als je dat niet doet, zullen ze standaard 100% zijn en heb je waarschijnlijk een te grote afbeelding:
Laten we alles opsplitsen in een paar opsommingspunten:
Viewbox is vergelijkbaar met het kijkvenster, maar je kunt het ook gebruiken om te "pannen" en "in te zoomen" als een telescoop.breedte en hoogte parameters op de svg element.Viewbox naar de svg element. Het kan ook op de elementen worden gebruikt symbool, markeerstift, patroon en uitzicht.Viewbox attribuut waarde bestaat uit vier van de ruimte gescheiden parameters.Viewbox parameters regelen "panning" en de laatste twee controle "zoomen".Viewbox dimensies, d.w.z. de laatste twee parameters, groter dan die van de viewport om uit te zoomen, en kleiner om in te zoomen.Ik hoop dat dit de soms troebele wateren van SVG helpt verduidelijken uitkijk postje en Viewbox. Veel succes met SVG!
