Bayangan Jatuh SVG
<defs> dan <filter>
Semua filter SVG didefinisikan dalam elemen <defs>. Elemen <defs> adalah kependekan dari definisi dan berisi definisi elemen khusus (seperti filter).
Elemen <filter> digunakan untuk mendefinisikan filter SVG. Elemen <filter> memiliki atribut id yang diperlukan yang mengidentifikasi filter. Grafik kemudian menunjuk ke filter yang akan digunakan.
SVG <feOffset>
Contoh 1
Elemen <feOffset> digunakan untuk membuat efek drop shadow. Idenya adalah untuk mengambil grafik SVG (gambar atau elemen) dan memindahkannya sedikit di bidang xy.
Contoh pertama meng-offset sebuah persegi panjang (dengan <feOffset>), kemudian memadukan yang asli di atas gambar offset (dengan <feBlend>):
Berikut adalah kode SVG:
Contoh
<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>
Penjelasan kode:
- Atribut id dari elemen <filter> mendefinisikan nama unik untuk filter
- Atribut filter dari elemen <rect> menautkan elemen ke filter "f1"
Contoh 2
Sekarang, gambar offset dapat diburamkan (dengan <feGaussianBlur>):
Berikut adalah kode SVG:
Contoh
<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>
Penjelasan kode:
- Atribut stdDeviation dari elemen <feGaussianBlur> mendefinisikan jumlah blur
Contoh 3
Sekarang, buat bayangan menjadi hitam:
Berikut adalah kode SVG:
Contoh
<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>
Penjelasan kode:
- Atribut in dari elemen <feOffset> diubah menjadi "SourceAlpha" yang menggunakan saluran Alpha untuk blur alih-alih seluruh piksel RGBA
Contoh 4
Sekarang, perlakukan bayangan sebagai warna:
Berikut adalah kode SVG:
Contoh
<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>
Penjelasan kode:
- Filter <feColorMatrix> digunakan untuk mengubah warna pada gambar offset mendekati hitam. Tiga nilai '0.2' dalam matriks semuanya dikalikan dengan saluran merah, hijau dan biru. Mengurangi nilainya membawa warna lebih dekat ke hitam (hitam adalah 0)