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

Sıradaki ders: SVG hover efektleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler