Panduan Reka Bentuk Web untuk Menggunakan Kotak View 'SVG' (HTML)
Kotak paparan adalah atribut yang biasa digunakan semasa membuat bentuk SVG . Sekiranya anda memikirkan dokumen itu sebagai kanvas, kotak paparan adalah sebahagian daripada kanvas yang anda mahu penonton dapat melihat. Walaupun halaman itu boleh meliputi seluruh skrin komputer, angka itu hanya boleh wujud sepertiga keseluruhannya.
Viewbox membolehkan anda memberitahu parser untuk mengezum pada ketiga. Ia menghilangkan ruang putih tambahan. Fikirkan kotak paparan sebagai pendekatan maya untuk memajukan imej.
Tanpa itu, grafik anda akan kelihatan sepertiga dari saiz sebenarnya.
Nilai Kotak Papar
Untuk memangkas imej, anda mesti membuat mata pada gambar untuk membuat potongan. Begitu juga dengan menggunakan atribut kotak pandangan. Tetapan nilai untuk peti masuk termasuk:
- minx - permulaan x koordinat
- miny - permulaan y koordinat
- lebar-lebar kotak paparan
- ketinggian ketinggian kotak paparan
Sintaks untuk nilai kotak paparan ialah:
viewBox = "0 0 200 150"
Jangan mengelirukan lebar dan ketinggian kotak paparan dengan lebar dan ketinggian yang anda tetapkan untuk dokumen SVG . Apabila anda membuat fail SVG, salah satu nilai pertama yang anda tetapkan ialah lebar dan ketinggian dokumen. Dokumen ini adalah kanvas. Kotak paparan boleh menutup seluruh kanvas atau sebahagian daripadanya.
Kotak paparan ini merangkumi seluruh halaman.
Kotak paparan ini meliputi separuh halaman bermula dari sudut kanan atas.
Bentuk anda juga mempunyai tugas tinggi dan lebar.
Ia adalah dokumen yang meliputi 800 x 400 px dengan kotak paparan yang bermula di sudut kanan atas dan memperluaskan separuh daripada halaman. Bentuknya adalah segi empat tepat yang bermula di sudut kanan atas kotak paparan dan bergerak 100 px ke kiri dan 50 px ke bawah.
Kenapa Tetapkan Peti Masuk?
SVG tidak lebih daripada sekadar menarik bentuk. Ia boleh membuat satu angka di atas yang lain untuk kesan bayangan. Ia boleh mengubah bentuk supaya ia berada dalam satu arah. Untuk penapis lanjutan, anda perlu memahami dan menggunakan atribut kotak pandangan.