SVG Blur Efektleri
<defs> ve <filters> Elemanları
Bütün internet SVG filtreleri <defs> elemanının içinde 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.
<feGaussianBlur> SVG Elemanı
<feGaussianBlur> elemanı, svg elemanına blur (bulanıklık) efekti vermek için kullanılır. Aşağıdaki örneğe dikkat edelim:
Bu blur efekti verilmiş svg grafiğinin kodu şöyledir:
<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>
<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>
Kodların anlamları:
- <filter> elemanının id değeri, bu elemanın emsalsiz bir kimlik almasını sağlar.
- Blur efeckti <feGaussianBlur> elamanı içinde verilir.
- in="SourceGraphic" kodu, blur efektinin, çizilen bütün şekli etkilemesini sağlar.
- stdDeviation="15" kodu, blur efektinin bir değer almasını sağlar.
- filter="url(#f1)" kodu <rect> elemanına atanarak, blur efektinin bu elemana uygulanması sağlanır.
Hiç yorum yok:
Yorum Gönder