CurrentColor
currentColor ile metin rengini SVG'e aktarmayı öğrenirsin.
currentColor nedir?
currentColor özel bir CSS anahtar sözcüğüdür: 'bu öğenin color değerini kullan' anlamına gelir. SVG'de bir şeklin fill veya stroke özelliğine verirsen, şekil metin rengini izler.
Bu, ikonların düğme metniyle birlikte renk değiştirmesini sağlar. Düğmenin color özelliğini değiştirirsin; ikon otomatik olarak onu izler. İki yerde renk yazmazsın.
Renk kalıtımı
CSS'te color özelliği üst öğeden alt öğeye geçer (kalıtım). Bir düğmede color: #2563eb yazarsan, içindeki SVG'nin color değeri de mavi olur — açıkça yazmasan bile.
Sonuç: fill: currentColor dediğin her SVG öğesi, düğmenin rengini izler. Tek bir yerde renk değiştirirsin; tüm ikonlar güncellenir.
Uygulama İkonu metin rengine bağla
.btn seçicisi içinde color özelliğini #0ea5e9 yap; .btn svg seçicisi içinde fill özelliğini currentColor yap. Böylece ikon, düğmenin metin rengini izler.
Örnek çözümü göster
.btn içinde color: #0ea5e9; .btn svg içinde fill: currentColor; yaz.
Örnek çözüm:
.btn {
color: #0ea5e9;
}
.btn svg {
fill: currentColor;
}Kendini test et
-
currentColor neyi ifade eder?
- Öğenin color değerini
- Sayfanın arka planını
- Üst öğenin yazı tipini
- Tarayıcı varsayılan rengini
Cevabı göster
Öğenin color değerini — Doğru! currentColor öğenin o anki color değerini alır.
-
currentColor kavramlarını eşleştir
- currentColor
- color değerini izler
- color
- kalıtım yayar
- fill: currentColor
- ikon metin rengini izler
- üst öğe
- rengi alt öğeye geçirir
-
İkonu metin rengine bağla
.icon path { fill: ____; }Cevabı göster
.icon path { fill: currentColor; }