Kami belajar bahwa batasan penggunaan untuk memasukkan sedikit SVG adalah Anda tidak dapat menulis pemilih CSS gabungan yang mempengaruhi melalui sana. Contohnya:
Batas shadow DOM mencegah penyeleksi suka
/* nope */ .parent .child ( )dari bekerja. Mungkin suatu hari nanti kita akan mendapatkan pemilih CSS yang berfungsi untuk menembus batas shadow DOM, tetapi saat tulisan ini dibuat, belum ada.
Anda masih dapat mengatur isian pada induk dan itu akan mengalir turun, tetapi itu hanya memberi Anda satu warna (ingat untuk tidak mengatur fillatribut presentasi pada bentuk-bentuk itu!).
Fabrice Weinberg memikirkan teknik kecil yang rapi untuk mendapatkan dua warna, memanfaatkan currentColorkata kunci di CSS.
Setel properti isi CSS pada bentuk apa pun yang Anda suka ke currentColor:
.shape-1, .shape-2 ( fill: currentColor; )Dengan cara itu saat Anda menyetel properti color pada induk , itu juga akan mengalir. Itu tidak akan melakukan apa pun dengan sendirinya (kecuali Anda ada di sana), tetapi currentColordidasarkan pada colorsehingga Anda dapat menggunakannya untuk hal-hal lain.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demo:
Lihat Logo Pen CodePen sebagai Inline SVG oleh Chris Coyier (@chriscoyier) di CodePen.