Artikel ini terutama memperkenalkan penggunaan atribut viewbox saat menggunakan gambar SVG di HTML5, termasuk beberapa konten terkait desain yang responsif. Teman yang membutuhkannya dapat merujuknya untuk dengan cepat memahami parameter viewbox
Atribut ViewBox digunakan untuk menentukan asal dan ukuran sistem koordinat gambar SVG pengguna. Semua konten yang ditarik dalam SVG dilakukan relatif terhadap sistem koordinat ini. Karena kanvas SVG diperluas secara tak terbatas di semua arah, Anda bahkan dapat menggambar grafik di luar batas sistem koordinat ini; Tetapi grafik ini diposisikan relatif terhadap jendela SVG juga dapat dikendalikan oleh posisi sistem koordinat pengguna.
Properti ViewBox menggunakan empat parameter untuk menentukan lokasi asal sistem koordinat dan ukurannya: tinggi lebar xy. Dalam kasus awal, sistem koordinat ini setara dengan sistem koordinat jendela yang diinisialisasi (ditentukan oleh lebar dan tinggi gambar SVG), dan asalnya adalah (0, 0) - yaitu, sudut kiri atas SVG.
Dengan mengubah nilai dari dua parameter x dan y, posisi asal dapat disesuaikan. Ubah nilai lebar dan tinggi untuk mengubah ukuran sistem koordinat. Cukup gunakan atribut viewbox untuk membantu Anda memperluas atau memotong kanvas SVG. Baca dengan contoh.
PENTING: Dalam artikel ini, saya tidak akan mengubah perilaku default (skala dan posisi) kotak view dalam jendela SVG. Karena, sesuai dengan perilaku default atribut, konten viewbox akan dimasukkan sepenuhnya di jendela mungkin dan kemudian ditempatkan di tengah. Namun, menggunakan properti Prepererveaspectratio memungkinkan Anda untuk secara bebas mengubah ukuran dan posisi kotak view, tetapi dalam artikel ini, ini bukan teknik yang diperlukan, jadi kami juga tidak akan menjelaskannya secara mendalam di sini.
Gunakan viewbox untuk memotong SVG, yaitu, gunakan atribut viewbox untuk membuat svg arah seni
Beberapa waktu yang lalu, salah satu klien saya meminta untuk mengatur avatar SVG situs webnya ke ukuran yang berbeda sesuai dengan ukuran layar yang berbeda, sehingga hanya sebagian kecil yang terlihat pada layar kecil, bagian yang lebih besar dapat dilihat pada ukuran layar sedang, dan kemudian konten lengkap dapat dilihat pada layar besar. Gagasan pertama yang muncul di benak saya pada waktu itu adalah bahwa persyaratannya adalah menggunakan atribut ViewBox untuk memotong gambar SVG, dan kemudian menampilkan bagian tertentu dari gambar yang ingin ia lihat berdasarkan ukuran layar yang berbeda.
Dengan mengubah ukuran dan asal sistem koordinat SVG, kami dapat memotong SVG dan menampilkan bagian dari konten yang ingin kami tampilkan di jendela.
Mari kita lihat bagaimana mengimplementasikannya.
Misalkan kita memiliki gambar SVG lengkap ini sebagai berikut, dan kemudian kita ingin memotongnya dengan ukuran layar kecil. Gambar ini adalah vektor rumah gratis yang dirancang oleh Freepik, yang dilisensikan di bawah perjanjian Creative Commons Attribution 3.0 yang tidak diportir. Untuk kesederhanaan, mari kita asumsikan bahwa gambar adalah tentang apa yang akan dipotong untuk ditampilkan pada layar kecil dan sedang, dan konten lengkap yang ditampilkan pada layar besar, seperti yang ditunjukkan di bawah ini.
Gambar di sebelah kiri adalah gambar lengkap yang akan kami potong menggunakan properti ViewBox, dan gambar di sebelah kanan adalah area yang ingin kami tampilkan di layar kecil.
Sekarang, potong SVG dengan mengubah nilai properti ViewBox. Ada beberapa hal yang perlu dipertimbangkan, kita akan membicarakannya nanti. Tapi pertama -tama, kita perlu mengubah sistem koordinat agar sesuai dengan konten area persegi panjang kotak virtual pada gambar di atas. , Dengan menyesuaikan asal sistem dan nilai lebar dan tinggi, kita dapat mengubah nilai parameter 0 0 800 800 awalnya.
Tetapi bagaimana kita mengetahui koordinat baru dan dimensi baru? Intinya adalah tidak melalui banyak eksperimen dan kesalahan berulang.
Ada beberapa cara. Karena kami sudah berada di editor grafis (contoh saya menggunakan AI), kita dapat menggunakan panel editor untuk mendapatkan posisi dan dimensi elemen.
Saya menggambar kotak persegi panjang bertitik ini, selain mewakili apa yang ingin saya tampilkan di layar kecil, alasan lain adalah karena kita bisa mendapatkan posisi dan dimensi persegi panjang dan menggunakannya sebagai nilai kotak view. Menggunakan panel transformasi AI (gambar di bawah), kami mendapatkan nilai yang kami butuhkan. Dengan memilih persegi panjang dan mengklik tautan transformasi di sudut kanan atas, kami mendapatkan panel yang ditunjukkan pada gambar di bawah ini, termasuk x, y, nilai lebar dan tinggi yang kami butuhkan.
Panel transformasi dalam AI ini dapat digunakan untuk mendapatkan posisi dan ukuran persegi panjang yang dipilih.
Anda mungkin telah memperhatikan bahwa nilai di atas bukan bilangan bulat, jadi kita perlu memodifikasinya secara manual. Berdasarkan informasi di atas, kami mengubah nilai viewbox menjadi 0 200 512 512.
Karena rasio aspek viewbox baru sama dengan jendela SVG (keduanya persegi), konten di kotak view akan diperluas, dan hanya area yang dipilih yang akan ditampilkan di jendela. Setelah mengubah nilai viewbox, hasilnya seperti yang ditunjukkan pada gambar:
SVG yang baru dipotong. Hanya lokasi tempat kami menentukan bahwa properti ViewBox terlihat di jendela. Perbatasan biru menunjukkan jendela SVG.
Pada titik ini, ada masalah yang perlu diselesaikan:
Bagaimana jika rasio aspek area yang dipangkas (mis. Viewbox) adalah rasio aspek dari jendela SVG?
Dalam hal ini, akan ada luapan yang signifikan. Overflow yang jelas, maksud saya bukan ekstensi di luar batas jendela SVG, tetapi overflow relatif terhadap sistem koordinat pengguna baru yang ditentukan oleh ViewBox. Gambar berikut memberikan penjelasan yang sesuai.
Jika rasio aspek viewbox berbeda dari rasio aspek viewbox, konten dalam SVG akan meluap sistem koordinat pengguna, dan hasilnya mungkin seperti ini.
Perbatasan hitam mewakili sistem koordinat pengguna baru, dan batas biru adalah jendela SVG.
Perbatasan hitam di gambar kanan di atas adalah area yang ditentukan oleh viewbox. Menurut perilaku default viewbox di jendela, itu akan dipusatkan dan diperbesar sebanyak mungkin untuk memastikan bahwa kontennya termasuk dalam jendela (perbatasan biru).
Karena kanvas SVG secara konseptual meluas secara tak terbatas ke segala arah, Anda dapat menggambar grafik di luar batas sistem koordinat pengguna, dan konten akan secara langsung meluap dan bergerak, seperti yang ditunjukkan pada gambar di atas.
Jika Anda mengubah rasio aspek jendela SVG (lebar dan tinggi SVG) untuk membuatnya beradaptasi dengan rasio aspek viewbox, Anda tidak akan melihat overflow karena zoom kotak view disesuaikan dengan jendela, seperti pada contoh sebelumnya.
Namun, dalam beberapa kasus, Anda mungkin tidak atau tidak ingin mengubah rasio aspek SVG sama sekali. Misalnya, jika Anda menggunakan SVG Sprite sebagai satu set gambar untuk menampilkan gambar di halaman. Dalam kebanyakan kasus, suatu gambar memiliki rasio aspek tetap - dan Anda tidak ingin mengubah ukuran gambar, hanya untuk beradaptasi dengan konten gambar kecil di dalamnya. Atau mungkin Anda telah menyematkan sistem ikon dan ingin semua ikon tetap memiliki ukuran yang sama secara bersamaan.
Untuk memotong kelebihan (misalnya, beberapa ikon lain di sprite ditampilkan di jendela), Anda dapat menggunakan <lippath> untuk memotong kelebihannya. Jalur kliping dapat berupa elemen <rect> yang menutupi seluruh area viewbox dan kemudian menerapkan elemen itu ke root SVG.
Namun, ada hal lain yang perlu diingat: Pastikan sifat x dan y dari <rect> konsisten dengan viewbox, kecuali jika Rect akan diposisikan secara relatif pada asal sistem asli/inisialisasi, maka konten SVG yang dipangkas juga tidak pasti.
Kode CSS menyalin konten ke clipboard