Kami mengetahui bahawa batasan penggunaan untuk memasukkan sedikit SVG adalah anda tidak boleh menulis pemilih CSS kompaun yang mempengaruhi di sana. Contohnya:
Batasan bayangan DOM menghalang pemilih suka
/* nope */ .parent .child ( )dari bekerja. Mungkin suatu hari nanti kita akan mendapat pemilih CSS yang berfungsi untuk menembusi batas bayangan DOM, tetapi untuk penulisan ini belum ada di sini.
Anda masih boleh menetapkan pengisian pada ibu bapa dan itu akan turun, tetapi itu hanya akan memberi anda satu warna (ingat untuk tidak menetapkan fillatribut persembahan pada bentuk-bentuk itu!).
Fabrice Weinberg memikirkan teknik kecil yang kemas untuk mendapatkan dua warna walaupun, menggunakan currentColorkata kunci dalam CSS.
Tetapkan sifat CSS isi pada bentuk yang anda suka semasaColor:
.shape-1, .shape-2 ( fill: currentColor; )Dengan cara itu apabila anda menetapkan sifat warna pada induk , itu juga akan berlalu. Ia tidak akan melakukan apa-apa dengan sendirinya (melainkan jika anda berada di sana), tetapi currentColordidasarkan colorsehingga anda boleh menggunakannya untuk perkara 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.