CSS'de stroke ve fill özellikleri, SVG (Scalable Vector Graphics) öğelerinin çizgi (stroke) ve dolgu (fill) renklerini belirlemek için kullanılır. Bu özellikler, HTML içinde doğrudan SVG öğeleri üzerinde veya CSS ile SVG öğelerine stil verirken kullanılabilir. Ancak, bu özellikler geleneksel HTML öğeleri üzerinde doğrudan uygulanamaz.

SVG Öğesinde stroke ve fill Kullanımı:

SVG içerisinde, stroke ve fill özellikleri, SVG'nin <path>, <circle>, <rect> gibi şekil öğelerine doğrudan uygulanabilir.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Bu örnekte, stroke özelliği çemberin çizgi rengini yeşil yapar, stroke-width çizginin kalınlığını belirler, ve fill özelliği çemberin iç kısmını sarı renk ile doldurur.

CSS ile SVG Öğelerine stroke ve fill Stili Verme:

CSS kullanarak SVG öğelerine stroke ve fill özelliklerini uygulamak da mümkündür. Bu, SVG'nizi HTML belgenize gömülü olarak kullanırken özellikle yararlıdır.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" class="my-circle" />
</svg>

.my-circle {
  stroke: blue;
  stroke-width: 2;
  fill: red;
}

Bu örnekte, .my-circle sınıfı, çemberin çizgi rengini maviye, çizgi kalınlığını 2 birime ve iç dolgu rengini kırmızıya ayarlar.

Notlar:

stroke ve fill özellikleri yalnızca SVG öğeleri için geçerlidir ve HTML öğeleri üzerinde bir etkisi yoktur.

SVG öğeleri web sayfalarına zengin grafikler eklemenizi sağlar ve CSS ile stilize edilebilirler, bu sayede dinamik ve interaktif kullanıcı arayüzleri oluşturabilirsiniz.

SVG'nin CSS ile stilize edilmesi, SVG'nizi HTML'e gömülü olarak kullanıyorsanız mümkündür. Harici olarak yüklenen SVG dosyaları için, stil değişiklikleri SVG dosyası içinde yapılmalıdır veya SVG dosyasının bir <style> etiketi içermesi gerekir.

TailwindCSS:

Fill

devamı var..

Stroke:

Stroke Width: