Hvernig á að skilja Viewbox eiginleiki í SVG

A Web Design Guide til að nota 'SVG' Viewbox (HTML)

Viewbox er eiginleiki sem almennt er notað þegar búa til SVG form. Ef þú hugsar um skjalið sem striga, þá er kassakassinn hluti af striga sem þú vilt sjá áhorfandann. Jafnvel þótt blaðsíðan geti farið yfir allan tölvuskjáinn getur myndin aðeins verið í þriðja hluta af heildinni.

Útsendingarkassinn gerir þér kleift að segja þátttakanda að þysja inn á þann þriðja. Það útilokar auka hvíta plássið. Hugsaðu um skoðunarhólf sem sýndaraðferð til að skera mynd.

Án þess verður myndin þín þriðja af raunverulegri stærð þess.

Útsýnisgildi

Til að klippa mynd verður þú að búa til stig á myndinni til að gera sneiðina. Það sama gildir þegar notandaskilaboðaskilaboðin eru notuð. Gildistillingar fyrir skoðunarhólf eru:

Setningafræði fyrir valmyndarskoðunarhólf er:

viewBox = "0 0 200 150"

Ekki rugla saman breidd og hæð skoðunarhólfsins með breidd og hæð sem þú stillir fyrir SVG skjalið. Þegar þú býrð til SVG skrá, er eitt af fyrstu gildunum sem þú staðfestir skjalið breidd og hæð. Skjalið er striga. Útsýnisreiturinn getur hylja allt striga eða aðeins hluta þess.

Þessi skoðunarhólf nær yfir alla síðuna.

Þessi skoðunarhólf nær yfir helming síðunnar sem byrjar efst í hægra horninu.

Lögun þín hefur einnig hæð og breidd verkefni.


Það er skjal sem nær 800x 400 px með sýnubók sem byrjar í efra hægra horninu og stækkar helming síðunnar. Lögunin er rétthyrningur sem byrjar í efra hægra horninu á skjánum og færir 100 punkta til vinstri og 50 punkta niður.

Afhverju ertu að setja inn skoðunarhólf?

SVG gerir miklu meira en bara teikna form. Það getur búið til eina mynd ofan á annan til að skyggða áhrif. Það getur umbreytt lögun þannig að það halli í eina átt. Fyrir háþróaða síurnar verður þú að skilja og nota eigindaskjáinn.