Kaip suprasti "SVG" skirtuko "Viewbox" priskyrimą

Svetainių kūrimo vadovas "SVG" dėžutės (HTML) naudojimui

"Viewbox" yra atributas, paprastai naudojamas kurdami SVG formas. Jei manote, kad dokumentas yra drobė, rodinio langelis yra drobės dalis, kurią norite matyti žiūrinčiui. Nors puslapis gali apimti visą kompiuterio ekraną, šis skaičius gali būti tik trečdaliu visos.

"Viewbox" leidžia pasakyti parseriui, kad padidintumėte trečią. Tai pašalina papildomą balta erdvę. Pagalvokite apie langelį kaip virtualų vaizdą.

Be to, jūsų grafika pasirodys trečdaliu nuo jo faktinio dydžio.

"Viewbox" vertės

Norėdami apkarpyti vaizdą, turite sukurti taškus paveiksle, kad padarytumėte gabalus. Tas pats pasakytina ir naudojant atributo rodinio lauką. Peržiūros dėžutės vertės nustatymai yra šie:

Peržiūros dėžutės reikšmių sintaksė yra:

viewBox = "0 0 200 150"

Negalima supainioti matymo dėžutės pločio ir aukščio su SVG dokumento nustatytam plotui ir aukščiui. Sukūrę SVG failą, viena iš pirmųjų nustatytų reikšmių yra dokumento plotis ir aukštis. Dokumentas yra drobė. Peržiūros dėžutė gali apimti visą drobę arba tik dalį jos.

Šis rodinio laukelis apima visą puslapį.

Šis rodinio langelis apima pusę puslapio, prasidedančio viršutiniame dešiniajame kampe.

Jūsų forma taip pat turi aukščio ir pločio užduotis.


Tai yra dokumentas, kurio dydis yra 800 x 400 pikselių su rodiniu, kuris prasideda viršutiniame dešiniajame kampe ir išplečia pusę puslapio. Forma yra stačiakampis, kuris prasideda viršutiniame dešiniajame rodinio dėžutės kampe ir juda 100 px į kairę ir 50 pikselių.

Kodėl nustatyti aplanką?

SVG daro daug daugiau, nei tiesiog išryškina formą. Tai gali sukurti vieną figūrą ant viršaus kito, kad būtų naudojamas šešėlis. Jis gali paversti formą taip, kad ji taps viena kryptimi. Jei norite išplėstinių filtrų, turėsite suprasti ir naudoti atvaizdą langelyje.