Styling Scalable Graphic Vector (SVG) dengan CSS
Hari ini kami akan meneruskan perbincangan kami mengenai Grafik Vektor Berkala (SVG), dan seperti yang telah kita katakan dalam jawatan terdahulu kami, salah satu kelebihan menggunakan SVG ialah ia boleh digayakan dengan CSS.
SVG Styling Properties
Styling SVG pada dasarnya berfungsi dengan cara yang sama seperti dalam elemen HTML biasa, mereka sebenarnya berkongsi beberapa sifat biasa juga. Walau bagaimanapun, terdapat ciri-ciri lain yang bertujuan khusus untuk objek SVG yang mempunyai spesifikasi mereka sendiri selain dari CSS.
Contohnya, dalam elemen HTML biasa, kita boleh menambah warna latar belakang sama ada dengan warna latar belakang atau latar belakang Harta CSS. Di SVG, ia agak berbeza; warna latar belakang dinyatakan dengan mengisi sebaliknya. Juga, sempadan elemen ditentukan dengan strok harta dan tidak dengan sempadan seperti yang kita lakukan dalam HTML biasa, anda boleh melihat senarai lengkap di sini.
Jika anda telah bekerja dengan editor vektor seperti Adobe Illustrator agak lama, anda boleh meneka dengan cepat bahawa mekanisme penamaan sifat di SVG berasal dari editor.
Pelaksanaan Gaya SVG
Kita boleh menggunakan salah satu cara berikut untuk gaya SVG;
Atribut Penyampaian
Jika anda telah melihat semua senarai SVG hartanah, mereka semua boleh ditambah terus ke elemen untuk mengubah persembahan elemen. Contoh berikut menunjukkan bagaimana kita boleh menambah mengisi dan strok harta secara langsung pada a rect elemen;
Segi empat tepat akan menjadi seperti tangkapan skrin di bawah;
Lembaran Gaya Dalam Talian
Kami juga boleh menambah gaya dengan gaya atribut. Dalam contoh berikut, kami juga akan menambah mengisi dan strok kepada rect, tetapi kali ini kita menambahnya di dalam gaya dan berputar dengan CSS3 ubah harta, seperti itu;.
Segiempat persegi akan berpaling pada hasil yang sama, hanya bahawa ia kini diputar;
Helaian Gaya Dalaman
Masukkan gaya SVG dalam gaya elemen juga mungkin dan tidak berbeza dengan cara kami melakukannya secara HTML biasa. Contoh berikut menunjukkan cara kami menambah gaya dalaman untuk mempengaruhi elemen SVG dalam .html dokumen.
Walau bagaimanapun, SVG adalah bahasa berasaskan XML, jadi apabila kita akan menambah helaian gaya dalam baris a .svg dokumen, kita perlu meletakkan deklarasi gaya di dalamnya cdata, seperti berikut;
The cdata di sini diperlukan, kerana CSS boleh dimiliki > watak yang akan bertentangan dengan parser XML. Menggunakan cdata sangat disyorkan untuk memasukkan gaya dalam SVG, walaupun karakter bercanggah tidak diberikan dalam helaian gaya.
Lembaran Gaya Luaran
Lembaran gaya luaran juga berfungsi dengan cara yang sama untuk elemen SVG di .html dokumen.
Sekali lagi di .svg dokumen, kita perlu merujuk lembaran gaya luaran sebagai xml-stylesheet, seperti itu.
Elemen Pengumpulan
Unsur SVG boleh dikelompokkan dengan
Kedua-dua persegi panjang dan bulatan akan mempunyai hasil yang sama.
Pemikiran Akhir
Kami telah melangkaui semua perkara penting mengenai penggayaan SVG dengan CSS dan ini hanya salah satu kelebihan melayani grafik dengan SVG. Dalam jawatan seterusnya kita akan melihat ke arah yang lain lagi, jadi tunggu.
- Lihat Demo
- Muat turun Sumber
