Inline SVG dapat "digayakan" dalam arti bahwa ia sudah memiliki isian dan pukulan dan bukan yang kedua anda meletakkannya di halaman. Itu hebat dan kaedah yang sangat baik untuk menggunakan SVG sebaris. Tetapi anda juga boleh membuat gaya SVG sebaris melalui CSS, yang agak mengagumkan kerana, saya bayangkan bagi kebanyakan kita, CSS adalah tempat di mana kita merasa kuat dan selesa.
Ia berfungsi seperti yang anda harapkan. Inilah contoh mudah:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS mempunyai sedikit "lebih banyak kekuatan", anda boleh katakan, daripada atribut gaya pada elemen SVG itu sendiri. Sekiranya seperti fill="red"itu berlaku, CSS akan tetap "menang". Anda mungkin berfikir sebaliknya kerana sepertinya atribut gaya akan sangat kuat seperti gaya sebaris, tetapi tidak. Gaya sebaris adalah masih walaupun berkuasa.
Begitu juga, peraturan CSS tidak jatuh jika ada sesuatu yang lebih spesifik berlaku. Contohnya:
.parent ( fill: red; )CSS kalah dalam kes ini, kerana warna biru diterapkan secara lebih khusus pada bahagian kanan.
Sekiranya saya merancang untuk menggayakan SVG melalui CSS, secara amnya saya merasa paling mudah untuk meninggalkan atribut gaya daripada elemen SVG sepenuhnya.
Perkara penting untuk mengetahui amaran!
Kami telah menghabiskan masa untuk bercakap . Katakan inilah keadaannya:
Akhirnya "anak" itu dimasukkan ke dalam "ibu bapa" itu bukan? Betul. Jadi ini mesti berfungsi?
.parent .child ( fill: red; )Tetapi tidak.
Dengan cara kerjanya, ia mengklonnya dan memasukkannya ke dalam "Shadow DOM" dalam SVG kedua itu. Anda tidak dapat menembusi bayangan DOM dengan pemilih seperti itu. Tidak berfungsi. Mungkin suatu hari nanti akan ada jalan penyelesaian, tetapi tidak ada sekarang.
Anda boleh lakukan seperti:
.parent ( fill: red; )Pengisian itu akan merangkumi dan mempengaruhi elemen kanak-kanak sekiranya tidak ada yang lebih spesifik dalam hal ini. Atau
.child ( fill: red; )dan mempengaruhi semua kejadian kanak-kanak itu. Tetapi tidak kedua-duanya.
Sekiranya anda memerlukan versi yang berbeza dengan perkara yang sama…
Gandakan atau apa sahaja yang anda perlukan. Sebilangan besar maklumat akan serupa, dan GZip makan teks yang sama untuk sarapan.