Styling Scalable Vector Graphic (SVG) dengan CSS
Hari ini kita akan melanjutkan diskusi tentang Scalable Vector Graphic (SVG), dan seperti yang telah kami tunjukkan di posting kami sebelumnya, salah satu keuntungan menggunakan SVG adalah bahwa ia dapat ditata dengan CSS.
Properti Styling SVG
Styling SVG pada dasarnya bekerja dengan cara yang sama seperti pada elemen HTML biasa, mereka sebenarnya berbagi beberapa sifat umum juga. Namun, ada properti lain yang dimaksudkan khusus untuk objek SVG yang memiliki spesifikasi sendiri selain dari CSS.
Contohnya, dalam elemen HTML biasa, kita dapat menambahkan warna latar belakang dengan warna latar belakang atau Latar Belakang Properti CSS. Dalam SVG, ini sedikit berbeda; warna latar belakang ditentukan dengan mengisi properti sebagai gantinya. Juga, batas elemen ditentukan dengan pukulan properti dan tidak dengan berbatasan seperti yang kami lakukan dalam HTML biasa, Anda dapat melihat daftar lengkapnya di sini.
Jika Anda telah bekerja dengan editor vektor seperti Adobe Illustrator cukup lama, Anda dapat menebak dengan cepat bahwa mekanisme penamaan properti di SVG berasal dari editor.
Implementasi Gaya SVG
Kita bisa menggunakan salah satu cara berikut untuk menata elemen SVG;
Atribut Presentasi
Jika Anda telah melihat semua daftar properti SVG, semuanya dapat ditambahkan langsung pada elemen untuk mengubah presentasi elemen. Contoh berikut menunjukkan bagaimana kita dapat menambahkan mengisi dan pukulan properti langsung pada a persegi panjang elemen;
Kotak akan berubah menjadi seperti tangkapan layar di bawah ini;
Lembar Gaya Inline
Kami juga dapat menambahkan gaya dengan gaya atribut. Dalam contoh berikut, kami juga akan menambahkan mengisi dan pukulan ke persegi panjang, tapi kali ini kami menambahkannya di dalam gaya dan putar dengan CSS3 mengubah properti, seperti itu;.
Persegi panjang akan berubah dalam hasil yang sama, hanya saja sekarang diputar juga;
Lembar Gaya Internal
Cantumkan gaya SVG di dalam gaya elemen juga dimungkinkan dan tidak berbeda dengan cara kami melakukannya pada HTML biasa. Contoh di bawah ini menunjukkan bagaimana kami menambahkan gaya internal untuk memengaruhi elemen SVG di .html dokumen.
Namun, SVG adalah bahasa berbasis XML, jadi ketika kita akan menambahkan style sheet inline di a .svg mendokumentasikan, kita perlu meletakkan deklarasi gaya di dalamnya cdata, sebagai berikut;
Itu cdata di sini diperlukan, karena CSS dapat memilikinya > karakter yang akan bertentangan dengan parser XML. Menggunakan cdata sangat disarankan untuk menyematkan gaya dalam SVG, bahkan jika karakter yang bertentangan tidak diberikan dalam lembar gaya.
Lembar Gaya Eksternal
Lembar gaya eksternal juga bekerja dengan cara yang sama untuk elemen SVG di .html dokumen.
Lagi di .svg dokumen, kita perlu merujuk style sheet eksternal sebagai xml-stylesheet, seperti itu.
Elemen Pengelompokan
Elemen SVG dapat dikelompokkan dengan
Baik persegi panjang dan lingkaran akan memiliki hasil yang sama.
Pemikiran Akhir
Kami telah membahas semua hal penting tentang menata SVG dengan CSS dan ini hanyalah salah satu kelebihan penyajian grafik dengan SVG. Pada posting selanjutnya kita akan melihat lebih jauh, jadi tunggu saja.
- Lihat Demo
- Sumber Unduhan
