HTML SVG Gölge Efekti Verme - Filtreleme Ders_3

HTML SVG Filtreleme: Gölge Efekti Verme

Bütün SVG filtreleri, <defs> elemanı içerisinde tanımlanır.

<filter> elemanı, özel SVG filtrelerini, efektlerini tanımlar. Her <filter> elemanı, bir id değeri almalıdır. Bu id değeri kullanılarak, efekti çizdiğimiz şekle uygularız.

SVG <feOffset> Örneği:

<feOffset> elemanı, cismin kendisini doğrudan gölge yapar. Cismi beli bir miktar kaydırarak, gölge efekti oluşturur.

<feBlend> elemanı ile de, oluşacak gölge efektinin stili ayarlanır.

Örneğe dikkat edelim:

Bu efekt için, şu kodlar kullanılmıştır:

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

Başka bir örnek:

Bu efekt şu kodlarla verilir:

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

Yukarıdaki kodun stdDeviation="10" özelliği, bulanıklığın miktarını ayarlar.

Başka bir örnek daha:

Bu efekt şu kodlarla verilir:

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

<feOffset> elemanındaki in="SourceAlpha" değişikliğine dikkat edin.

Başka bir örnek daha:

Bu efekt şu kodlarla verilir:

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

<feColorMatrix> elemanı, gölgeyi resmin gerçek renginden siyaha doğru kaydırır. type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" ifadesindeki üç adet 0.2 matrix değeri, sırasıyla kırmızı, yeşil ve mavi kanallarıyla çarpılır. Bu sayıların değerlerini sıfıra yaklaştırmak, rengin siyaha yaklaşmasını sağlar.

sonraki ders için tıklayınız