<Defs> dan <filter>
Semua filter SVG didefinisikan dalam <defs> elemen. <defs> elemen singkat dan mengandung definisi elemen khusus (seperti filter).
<filter> elemen digunakan untuk mendefinisikan filter SVG. <filter> elemen memiliki atribut id yang diperlukan untuk mengidentifikasi filter. Grafik kemudian menunjuk ke filter untuk digunakan.
SVG <feOffset>
Contoh 1
<feOffset> elemen digunakan untuk menciptakan efek drop shadow. Idenya adalah untuk mengambil grafis SVG (gambar atau elemen) dan memindahkannya sedikit dalam bidang xy.
Contoh pertama offset persegi panjang (dengan <feOffset>), kemudian berbaur asli di atas gambar offset (dengan <feBlend>):
<svg width="120" height="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>
Kode penjelasan:
- Id atribut <filter> elemen mendefinisikan nama untuk filter
- Atribut filter dari <rect> elemen link elemen ke "f1" filter
Contoh 2
Sekarang, gambar offset dapat kabur (dengan <feGaussianBlur>):
<svg width="140" height="140">
<defs>
<filter id="f1" 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(#f1)"/>
</svg>
Kode penjelasan:
- The stdDeviation atribut <feGaussianBlur> elemen mendefinisikan jumlah blur
Contoh 3
Sekarang, membuat bayangan hitam:
<svg width="140" height="140">
<defs>
<filter id="f1" 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(#f1)"/>
</svg>
Kode penjelasan:
- Dalam atribut <feOffset> elemen berubah menjadi "SourceAlpha" yang menggunakan saluran Alpha untuk kabur seluruh RGBA pixel
Contoh 4
Sekarang, memperlakukan bayangan sebagai warna:
<svg width="140" height="140">
<defs>
<filter id="f1" 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="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(#f1)"/>
</svg>
0 komentar:
Posting Komentar