SVG Alt Gölgeleri
<defs> ve <filtre>
Tüm SVG filtreleri bir <defs> öğesi içinde tanımlanır. <defs> öğesi, tanımların kısaltmasıdır ve özel öğelerin (filtreler gibi) tanımını içerir.
<filter> öğesi, bir SVG filtresini tanımlamak için kullanılır. <filter> öğesi, filtreyi tanımlayan gerekli bir kimlik özelliğine sahiptir. Grafik daha sonra kullanılacak filtreye işaret eder.
SVG <feOffset>
örnek 1
<feOffset> öğesi, alt gölge efektleri oluşturmak için kullanılır. Buradaki fikir, bir SVG grafiği (görüntü veya öğe) almak ve onu xy düzleminde biraz hareket ettirmektir.
İlk örnek bir dikdörtgeni öteler (<feBlend> ile), ardından orijinali ofset görüntüsünün üstünde harmanlar (<feBlend> ile):
İşte SVG kodu:
Örnek
<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>
Kod açıklaması:
- <filter> öğesinin id özelliği, filtre için benzersiz bir ad tanımlar
- <rect> öğesinin filtre özniteliği, öğeyi "f1" filtresine bağlar
Örnek 2
Artık ofset görüntü bulanıklaştırılabilir (<feGaussianBlur> ile):
İşte SVG kodu:
Örnek
<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>
Kod açıklaması:
- <feGaussianBlur> öğesinin stdDeviation özelliği, bulanıklığın miktarını tanımlar
Örnek 3
Şimdi, gölgeyi siyah yapın:
İşte SVG kodu:
Örnek
<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>
Kod açıklaması:
- <feOffset> öğesinin in niteliği, bulanıklaştırma için tüm RGBA pikseli yerine Alfa kanalını kullanan "SourceAlpha" olarak değiştirilir
Örnek 4
Şimdi, gölgeyi bir renk olarak ele alın:
İşte SVG kodu:
Örnek
<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>
Kod açıklaması:
- <feColorMatrix> filtresi, ofset görüntüdeki renkleri siyaha yaklaştırmak için kullanılır. Matristeki üç '0.2' değerinin tümü kırmızı, yeşil ve mavi kanallarla çarpılır. Değerlerini azaltmak, renkleri siyaha yaklaştırır (siyah 0'dır)