SVG Bulanıklaştırma Efektleri
<defs> ve <filtre>
Tüm internet 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 <feGaussianBlur>
örnek 1
<feGaussianBlur> öğesi, bulanıklık efektleri oluşturmak için kullanılır:
İşte SVG kodu:
Örnek
<svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15"
/>
</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
- Bulanıklaştırma efekti <feGaussianBlur> öğesiyle tanımlanır
- in="SourceGraphic" bölümü, efektin tüm öğe için oluşturulduğunu tanımlar
- stdDeviation özelliği, bulanıklığın miktarını tanımlar.
- <rect> öğesinin filtre özniteliği, öğeyi "f1" filtresine bağlar