"SVG" ko'rish qutisi (HTML) dan foydalanish uchun veb-dizayn bo'yicha qo'llanma
Viewbox - SVG shakllarini yaratishda foydalaniladigan atributlardan biridir. Agar hujjatni tuvali deb hisoblasangiz, ko'rinish qutisi tomoshabinning ko'rishini xohlagan tuvalning bir qismidir. Sahifa butun kompyuter ekranini qamrab olishi mumkin bo'lsa-da, bu raqam faqat uchdan birida mavjud bo'lishi mumkin.
Viewbox sizning uchinchi qismni kattalashtirishga ruxsat beradi. Bu qo'shimcha bo'shliqni yo'q qiladi. Vahiyni kesish uchun virtual ko'rinish sifatida ko'rish qutisini o'ylab ko'ring.
U holda sizning grafikingiz haqiqiy hajmining uchdan biri ko'rinadi.
Viewbox qiymatlari
Tasvirni kesish uchun kesiklarni ochish uchun rasmdagi nuqtalarni yaratishingiz kerak. Xuddi shu narsani ko'rish qutisi atributidan foydalanganda ham xuddi shunday. Ko'rish uchun qiymat sozlamalari quyidagilarni o'z ichiga oladi:
- minx - boshlang'ich x koordinatasi
- boshlang'ich y koordinatasi
- kengligi - ko'rish qutisi kengligi
- balandligi - ko'rish qutisi
Ko'rish qutisi qiymatlari uchun sintaksis:
viewBox = "0 0 200 150"
Vizual oynaning kengligi va balandligini SVG hujjati uchun o'rnatgan kenglik va balandlik bilan aralashtirmang. SVG faylini yaratganingizda dastlabki qiymatlardan biri hujjatning kengligi va balandligi. Hujjat bir kanvas. Tashqi ko'rinish qutisi butun tuvali yoki uning faqat bir qismini qoplashi mumkin.
Ushbu ko'rinish qutisi butun sahifani qamrab oladi.
Ushbu ko'rinish qutisi yuqori o'ng burchagidan boshlab yarim sahifani qamrab oladi.
Shaklingizning balandligi va kenglik belgilari ham mavjud.
Hujjat 800 x 400 px qopqoqni o'ng tomondagi burchakda boshlangan va sahifaning yarmini kengaytiradigan ko'rinishga ega. Shakli ko'rinish qutisi yuqori o'ng burchagidan boshlangan va 100 px chapga va 50 px pastga tushadigan to'rtburchak.
Nima uchun Viewbox o'rnatish?
SVG shaklni chizishdan ko'ra ko'proq narsa qiladi. Soya effekti uchun bir-birining ustiga yana bitta raqamni yaratishi mumkin. Shaklni bir tomon yo'naltiradigan tarzda o'zgartirishi mumkin. Ilgari filtrlar uchun ko'rinish qutisi atributini tushunishingiz va foydalanishingiz kerak.