<Defs> dan <filter>
Semua filter SVG didefinisikan dalam <defs> elemen. The <defs> elemen singkat untuk definisi dan mengandung definisi elemen khusus (such as filters) .
The <filter> elemen digunakan untuk mendefinisikan filter SVG. The <filter> elemen memiliki atribut id yang diperlukan yang mengidentifikasi filter. grafis kemudian menunjuk ke filter untuk digunakan.
SVG <feOffset>
contoh 1
The <feOffset> elemen digunakan untuk membuat penurunan efek bayangan. Idenya adalah untuk mengambil grafis SVG (image or element) dan memindahkannya sedikit dalam bidang xy.
Contoh pertama offset persegi panjang (with <feOffset>) , maka campuran asli di atas gambar diimbangi (with <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>
Cobalah sendiri " Code explanation:
- The id atribut dari <filter> elemen mendefinisikan nama yang unik untuk filter
- The filter atribut dari <rect> elemen link elemen ke "f1" Filter
contoh 2
Sekarang, gambar offset dapat kabur (with <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>
Cobalah sendiri " Code explanation:
- The stdDeviation atribut dari <feGaussianBlur> elemen mendefinisikan jumlah blur
contoh 3
Sekarang, membuat bayangan 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>
Cobalah sendiri " Code explanation:
- The in atribut dari <feOffset> elemen diubah menjadi "SourceAlpha" yang menggunakan saluran Alpha untuk blur bukan seluruh pixel RGBA
contoh 4
Sekarang, memperlakukan 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>
Cobalah sendiri " Code explanation:
- The <feColorMatrix> filter digunakan untuk mengubah warna pada gambar mengimbangi lebih dekat ke hitam. Tiga nilai dari '0,2' dalam matriks semua mendapatkan dikalikan dengan saluran merah, hijau dan biru. Mengurangi nilai-nilai mereka membawa warna lebih dekat ke hitam (black is 0)