SVG дээр Viewbox шинж чанарыг хэрхэн ойлгох талаар

'SVG' тохиргоог ашиглах Вэб дизайны гарын авлага (HTML)

Viewbox бол SVG хэлбэрүүдийг үүсгэхдээ түгээмэл хэрэглэгддэг шинж чанар юм. Хэрэв та баримтыг зураг шиг бодвол харах хайрцаг нь үзэгчийн харахыг хүссэн зурагны хэсэг юм. Хэдийгээр хуудас нь бүхэл бүтэн компьютерийн дэлгэцийг хамарч болох ч гэсэн тоо нь нийт хэмжээний гуравны нэг нь л байж болно.

Viewbox нь таныг parser-д тухайн гурав дахь томруулалтыг нэмэх боломжийг олгоно. Энэ нь нэмэлт цагаан зайг арилгадаг. Харах хайрцагыг дүрсийг тариалах виртуал арга гэж үзье.

Үүнгүйгээр, таны график нь түүний бодит хэмжээний гуравны нэгийг харуулна.

Viewbox утга

Зургийг байршуулахын тулд зураг дээр оноо өгөх ёстой. Үзлэгийн хайрцагны шинж чанарыг ашиглах үед мөн адил байна. Харах цонхны утгын тохиргоо нь:

Үзлэгийн хайрцагны утгуудын синтакс нь:

viewBox = "0 0 200 150"

SVG баримт бичигт тохируулсан өргөн ба өндрийг харах хайрцагны өргөн ба өндөрийг бүү будлиул . SVG файл үүсгэх үед таны үүсгэсэн анхны утгууд нь баримтын өргөн ба өндөр юм. Баримт бол зураг юм. View box нь бүхэлд нь зураг эсвэл хэсэгчлэн хамарч болно.

Энэ харах хайрцаг нь бүх хуудсыг хамарна.

Энэ харах хайрцаг нь баруун дээд булангаас эхлэн хуудасны хагас хэсгийг хамарна.

Таны хэлбэр нь өндөр, өргөн даалгавартай.


Энэ бол 800 x 400 факстай хамаатай бичиг баримт бөгөөд баруун дээд буланд эхэлж дэлгэцийн талыг нь харуулдаг. Хэмжээ нь харуулын хайрцагны баруун дээд буланд байрлах тэгш өнцөгт хэлбэртэй бөгөөд 100 px зүүн тийш, 50 px доошоо хөдөлдөг.

Яагаад заавал Viewbox хийх вэ?

SVG нь зөвхөн хэлбэр зурахаас илүү ихийг хийдэг. Энэ нь сүүдрийн нөлөөгөөр өөр нэгний дээр нэг дүрс үүсгэж болно. Энэ нь нэг чигт хазайж, хэлбэрийг өөрчилж болно. Нарийвчилсан шүүлтүүрийн хувьд та харах хайрцагны шинж чанарыг ойлгож хэрэглэх хэрэгтэй.