SVG Filter
SVG Filter digunakan untuk menambahkan efek khusus pada grafis SVG.
SVG Filter Elemen
Dalam bab-bab berikutnya, kita hanya akan menunjukkan sentuhan efek filter - dan memberi Anda gambaran tentang apa yang dapat dilakukan dengan SVG.
Elemen filter yang tersedia di SVG adalah:
- <FeBlend> - untuk menggabungkan gambar
- <FeColorMatrix> - untuk transformasi warna
- <FeComponentTransfer>
- <FeComposite>
- <FeConvolveMatrix>
- <FeDiffuseLighting>
- <FeDisplacementMap>
- <FeFlood>
- <FeGaussianBlur>
- <FeImage>
- <FeMerge>
- <FeMorphology>
- <FeOffset> - filter untuk drop bayangan
- <FeSpecularLighting>
- <FeTile>
- <FeTurbulence>
- <FeDistantLight> - filter untuk penerangan
- <FePointLight> - filter untuk penerangan
- <FeSpotLight> - filter untuk penerangan
SVG Blur Efek
<Defs> dan <filter>
Semua filter SVG internet didefinisikan dalam <defs> elemen. <defs> elemen singkat untuk definisi dan mengandung definisi elemen khusus (seperti filter).
<filter> elemen digunakan untuk mendefinisikan filter SVG. <filter> elemen memiliki atribut id yang diperlukan yang mengidentifikasi filter. kemudian Grafik menunjuk ke filter untuk digunakan.
SVG <feGaussianBlur>
Contoh 1
<feGaussianBlur> elemen digunakan untuk membuat efek blur:
<svg width="110" height="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>
Kode penjelasan:
- Id atribut <filter> elemen mendefinisikan nama yang untuk filter
- Efek blur didefinisikan dengan <feGaussianBlur> elemen
- Dalam = "SourceGraphic" bagian mendefinisikan bahwa efek dibuat untuk seluruh elemen
- The stdDeviation atribut mendefinisikan jumlah blur
- Atribut filter dari <rect> elemen link elemen ke "f1" filter
0 komentar:
Posting Komentar