Isang Web Design Guide sa Paggamit ng 'SVG' Viewbox (HTML)
Ang Viewbox ay isang katangian na karaniwang ginagamit kapag lumilikha ng mga hugis ng SVG . Kung iniisip mo ang dokumento bilang canvas, ang kahon ng pagtingin ay bahagi ng canvas na gusto mong makita ng manonood. Kahit na ang pahina ay maaaring sumasaklaw sa buong screen ng computer, ang figure ay maaaring umiiral lamang sa isang third ng kabuuan.
Binibigyang-daan ka ng Viewbox na sabihin sa parser upang mag-zoom in sa pangatlong iyon. Tinatanggal nito ang sobrang puting espasyo. Isipin ang view box bilang isang virtual na diskarte upang i-crop ang isang imahe.
Kung wala ito, ang iyong graphic ay lalabas sa isang ikatlo ng aktwal na laki nito.
Mga Halaga ng Viewbox
Upang i-crop ang isang imahe, dapat kang lumikha ng mga puntos sa larawan upang gawin ang mga pagbawas. Totoo rin ito kapag ginagamit ang attribute view box. Ang mga setting ng halaga para sa viewbox ay kinabibilangan ng:
- minx - ang simula ng x coordinate
- miny-ang simula ng y coordinate
- width -width ng viewbox
- taas -timbang ng viewbox
Ang syntax para sa mga halaga ng view box ay:
viewBox = "0 0 200 150"
Huwag malito ang lapad at taas ng kahon ng pagtingin na may lapad at taas na itinakda mo para sa dokumento ng SVG . Kapag lumikha ka ng isang SVG file, ang isa sa mga unang halaga na itinatag mo ay ang lapad at taas ng dokumento. Ang dokumento ay isang canvas. Maaaring masakop ng kahon ng view ang buong canvas o isang bahagi lamang nito.
Ang kahon ng view na ito ay sumasaklaw sa buong pahina.
Sinasaklaw ng kahon ng pagtingin na ito ang kalahati ng pahina na nagsisimula sa kanang sulok sa kanan.
Ang iyong hugis ay may taas at malawak na takdang-aralin.
Ito ay isang dokumento na sumasaklaw sa 800 x 400 px na may isang viewbox na nagsisimula sa itaas na kanang sulok at nagpapalawak ng kalahati ng pahina. Ang hugis ay isang rektanggulo na nagsisimula sa kanang sulok sa kanan ng kahon ng pagtingin at gumagalaw 100 px sa kaliwa at 50 px pababa.
Bakit Magtakda ng isang Viewbox?
Ang SVG ay higit pa sa pagguhit ng isang hugis. Maaari itong lumikha ng isang figure sa tuktok ng isa pang para sa isang anino epekto. Maaari itong ibahin ang anyo ng hugis nang sa gayon ito ay nakakapigil sa isang direksyon. Para sa mga advanced na filter, kakailanganin mong maunawaan at gamitin ang katangian ng view box.