Fill ve stroke
fill ve stroke özelliklerini öğrenirsin.
fill: iç renk
Bir SVG şeklinin içini boyamak için fill özelliğini kullanırsın. Değer bir renk adı, hex kod ya da rgb() olabilir. Varsayılan değer black'tir; bu yüzden hiçbir şey yazmazsan şekil siyah çıkar.
Şekli tamamen içi boş bırakmak istersen fill: none yazarsın. Bu, yalnızca çizgisi olan bir taslak görseli için işe yarar: dairenin içi saydam, yalnızca kenarı görünür.
stroke: kenar çizgisi
Bir SVG şeklinin kenarını çizmek için stroke özelliğini kullanırsın. Değer yine bir renktir. stroke: #1e40af kenarı lacivert yapar.
Çizginin kalınlığı ayrı bir özelliktir: stroke-width. Varsayılanı 1 birimdir; stroke-width: 3 ile kalın, stroke-width: 0.5 ile ince bir kenar elde edersin.
Uygulama Logoyu lacivert ve kalın kenarla boya
.logo seçicisi içine iki bildirim yaz: fill özelliğini #1e40af (lacivert) ve stroke-width özelliğini 3 yap.
Örnek çözümü göster
.logo seçicisini aç, içine fill: #1e40af; ve stroke-width: 3; yaz.
Örnek çözüm:
.logo {
fill: #1e40af;
stroke-width: 3;
}Kendini test et
-
fill özelliği neyi belirler?
- İç rengi
- Kenar kalınlığını
- Şeklin boyutunu
- Dönüş açısını
Cevabı göster
İç rengi — Doğru! fill SVG şeklinin iç rengini belirler.
-
İç rengi kırmızı yap
.logo path { ____: #e11d48; }Cevabı göster
.logo path { fill: #e11d48; } -
Özellikleri eşleştir
- fill
- iç renk
- stroke
- kenar renk
- stroke-width
- kenar kalınlığı
- none
- iç boş değeri