ຄູ່ມືການອອກແບບເວັບໄຊຕ໌ການນໍາໃຊ້ Viewbox 'SVG' (HTML)
Viewbox ເປັນລັກສະນະທົ່ວໄປທີ່ໃຊ້ໃນເວລາສ້າງຮູບ SVG . ຖ້າທ່ານຄິດວ່າເອກະສານເປັນຮູບ canvas, ກ່ອງມຸມເບິ່ງແມ່ນສ່ວນຫນຶ່ງຂອງແຜ່ນສີທີ່ທ່ານຕ້ອງການໃຫ້ຜູ້ເບິ່ງເຫັນ. ເຖິງແມ່ນວ່າຫນ້ານີ້ອາດກວມເອົາຫນ້າຈໍຄອມພິວເຕີທັງຫມົດ, ຕົວເລກອາດຈະມີຢູ່ໃນສ່ວນສາມຂອງທັງຫມົດ.
Viewbox ອະນຸຍາດໃຫ້ທ່ານບອກນັກວິເຄາະທີ່ຈະຂະຫຍາຍຕົວໃນສາມອັນນັ້ນ. ມັນຈະລົບລ້າງຊ່ອງຫວ່າງສີຂາວ. ຄິດເບິ່ງກ່ອງເບິ່ງເປັນວິທີການເສມືນໃນການປູກຮູບພາບ.
ໂດຍບໍ່ມີມັນ, ຮູບພາບຂອງທ່ານຈະປາກົດເປັນສ່ວນສາມຂອງຂະຫນາດຈິງຂອງມັນ.
Viewbox Values
ການປູກຮູບພາບ, ທ່ານຕ້ອງສ້າງຈຸດໃນຮູບເພື່ອເຮັດໃຫ້ການຕັດ. ດຽວກັນແມ່ນຄວາມຈິງໃນເວລາທີ່ໃຊ້ຄຸນລັກສະນະກ່ອງເບິ່ງ. ການຕັ້ງຄ່າຄ່າສໍາລັບ viewbox ປະກອບມີ:
- minx - ຈຸດເລີ່ມຕົ້ນ x coordinate
- miny-the beginning y coordinate
- width-width ຂອງ viewbox
- height-height of the viewbox
ສະກຸນເງິນສໍາລັບຄ່າເບິ່ງຂອງຕາຕະລາງແມ່ນ:
viewBox = "0 0 200 150"
ຢ່າສັບສົນຄວາມກວ້າງແລະຄວາມສູງຂອງກ່ອງເບິ່ງດ້ວຍຄວາມກວ້າງແລະຄວາມສູງທີ່ທ່ານກໍານົດສໍາລັບເອກະສານ SVG . ເມື່ອທ່ານສ້າງໄຟລ໌ SVG, ຫນຶ່ງໃນຄ່າທໍາອິດທີ່ທ່ານສ້າງແມ່ນ width ແລະ width ຂອງເອກະສານ. ເອກະສານແມ່ນ canvas ເປັນ. ກ່ອງເບິ່ງສາມາດກວມເອົາຜ້າໃບທັງຫມົດຫຼືພຽງແຕ່ບາງສ່ວນຂອງມັນ.
ກ່ອງເບິ່ງນີ້ກວມເອົາຫນ້າທັງຫມົດ.
ກ່ອງເບິ່ງນີ້ກວມເຄິ່ງຫນຶ່ງຂອງຫນ້າທີ່ເລີ່ມຕົ້ນໃນແຈຂວາມືເທິງ.
ຮູບຮ່າງຂອງທ່ານຍັງມີຄວາມສູງແລະກໍານົດຄວາມກວ້າງ.
ມັນເປັນເອກະສານທີ່ກວມເອົາ 800 x 400 px ກັບມຸມເບິ່ງທີ່ເລີ່ມຕົ້ນໃນແຈຂວາມືເທິງແລະຂະຫຍາຍຄຶ່ງຫນຶ່ງຂອງຫນ້າ. ຮູບຮ່າງແມ່ນຮູບສີ່ຫຼ່ຽມມົນທີ່ເລີ່ມຕົ້ນໃນແຈເບື້ອງຊ້າຍດ້ານຂວາຂອງກ່ອງເບິ່ງແລະຍ້າຍ 100 px ໄປທາງຊ້າຍແລະ 50 px ລົງ.
ເປັນຫຍັງກໍານົດ Viewbox?
SVG ເຮັດຫຼາຍກວ່າພຽງແຕ່ແຕ້ມຮູບ. ມັນສາມາດສ້າງຕົວເລກຫນຶ່ງຢູ່ເທິງຫນຶ່ງຂອງຜົນກະທົບເງົາ. ມັນສາມາດປ່ຽນຮູບຮ່າງເພື່ອໃຫ້ມັນເລື່ອນລົງໃນຫນຶ່ງທິດ. ສໍາລັບການກັ່ນຕອງຂັ້ນສູງ, ທ່ານຈໍາເປັນຕ້ອງເຂົ້າໃຈແລະໃຊ້ຂອບ attribute view.