SVG sebaris dapat "ditata" dalam arti sudah memiliki isian dan guratan dan yang lainnya saat Anda meletakkannya di halaman. Itu luar biasa dan cara yang sangat bagus untuk menggunakan SVG sebaris. Tapi Anda juga bisa menata SVG inline melalui CSS, yang cukup mengagumkan karena, saya membayangkan bagi banyak dari kita, CSS adalah tempat yang membuat kita merasa kuat dan nyaman.
Ini bekerja cukup banyak seperti yang Anda harapkan. Berikut contoh sederhananya:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS memiliki "kekuatan lebih", bisa dibilang, daripada atribut gaya pada elemen SVG itu sendiri. Jika memang seperti fill="red"itu, CSS akan tetap "menang". Anda mungkin berpikir sebaliknya karena sepertinya atribut gaya akan menjadi kuat seperti gaya sebaris, tetapi sebenarnya tidak. Gaya inline yang masih meskipun kuat.
Demikian pula, aturan CSS tidak menurun jika ada sesuatu yang lebih spesifik terjadi. Contohnya:
.parent ( fill: red; )CSS kalah dalam kasus ini, karena biru diterapkan lebih spesifik pada persegi.
Jika saya berencana untuk menata SVG melalui CSS, saya biasanya merasa paling mudah untuk meninggalkan atribut gaya dari elemen SVG sepenuhnya.
Hal penting yang perlu diketahui waspada!
Kami telah menghabiskan waktu untuk membicarakannya . Katakanlah ini situasinya:
Pada akhirnya "anak" itu dimasukkan ke dalam "orang tua" itu kan? Baik. Jadi ini harus berhasil?
.parent .child ( fill: red; )Tapi ternyata tidak.
Begitulah cara kerjanya, ia mengkloningnya dan menempatkannya ke dalam "DOM Bayangan" di SVG kedua itu. Anda tidak dapat menembus shadow DOM dengan selektor seperti itu. Tidak berhasil. Mungkin suatu saat nanti akan ada solusi, tapi saat ini belum ada.
Anda bisa melakukan seperti:
.parent ( fill: red; )Dan pengisian itu akan mengalir melalui dan memengaruhi elemen anak jika tidak ada yang lebih spesifik di jalan. Atau
.child ( fill: red; )dan memengaruhi semua kejadian anak itu. Tapi tidak keduanya.
Jika Anda memang membutuhkan versi dengan gaya berbeda untuk hal yang sama…
Gandakan saja atau apa pun yang Anda butuhkan. Sebagian besar informasi akan identik, dan GZip memakan teks yang sama untuk sarapan.