Biraz SVG eklemek için kullanmanın bir sınırlamasının, oradan etkileyen bileşik CSS seçicileri yazamayacağınız olduğunu öğrendik . Örneğin:
Bu gölge DOM sınırı, aşağıdaki gibi seçicileri engeller
/* nope */ .parent .child ( )çalışmaktan. Belki bir gün bu gölge DOM sınırını aşmak için çalışan bir CSS seçici bulacağız, ancak bu yazı itibariyle henüz burada değil.
Yine de üst öğe üzerinde dolguyu ayarlayabilirsiniz ve bu aşağıya doğru kademeli olacaktır, ancak bu size yalnızca bir renk verir ( fillbu şekillerde sunum niteliğini ayarlamamayı unutmayın !).
Fabrice Weinberg, CSS'deki currentColoranahtar kelimeyi istismar ederek iki renk elde etmek için düzgün ve küçük bir teknik düşündü .
Beğendiğiniz şekillerde CSS dolgu özelliğini currentColor olarak ayarlayın:
.shape-1, .shape-2 ( fill: currentColor; )Bu şekilde, üst öğe üzerinde renk özelliğini ayarladığınızda , bu da basamaklı olacaktır. Kendi başına hiçbir şey yapmaz ( orada olmadıkça ), ancak ona currentColordayanır, colorböylece onu başka şeyler için kullanabilirsiniz.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Demo:
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Satır içi SVG olarak Pen CodePen Logosuna bakın.