Bayangan SVG
Nota: Internet Explorer dan Safari tidak menyokong penapis SVG!
<defs> dan <filter>
Semua penapis SVG Internet ditakrifkan dalam elemen <defs> Takrifan elemen <defs> pendek dan mengandungi takrifan untuk elemen khas (seperti penapis).
<penapis> teg digunakan untuk mentakrifkan penapis SVG. Teg <penapis> menggunakan atribut id yang diperlukan untuk menentukan penapis yang hendak digunakan pada graf?
SVG <feOffset>
Contoh 1 Unsur
<feOffset> digunakan untuk mencipta kesan bayangan. Ideanya adalah untuk mengambil grafik SVG (imej atau elemen) dan gerakkannya sedikit pada satah xy.
Contoh pertama mengimbangi segi empat tepat (dengan <feOffset>), kemudian menggabungkan mengimbangi bahagian atas imej (dengan <feBlend>):
Berikut ialah kod SVG:
Instance
<!DOCTYPE html> <html> <body> <p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Untuk pengguna Opera: Lihat fail SVG (klik kanan pada sumber pratonton grafik SVG).
Analisis kod:
<penapis>Atribut id elemen mentakrifkan nama unik penapis
- Atribut penapis bagi elemen
<rect> digunakan untuk memautkan elemen ke penapis "f1"
Contoh 2
Sekarang , offset Imej boleh dikaburkan (termasuk <feGaussianBlur>):
Berikut ialah kod SVG:
Untuk pengguna Opera: Lihat Fail SVG ( Klik kanan pada sumber pratonton grafik SVG).
Analisis kod:
<feGaussianBlur> Atribut stdDeviation bagi elemen mentakrifkan jumlah kabur
Contoh 3
Sekarang, buat bayang hitam:
Berikut ialah kod SVG:
Contoh
<!DOCTYPE html> <html> <body> <p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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> </body> </html>
Jalankan contoh»
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian
Untuk pengguna Opera: Lihat fail SVG (klik kanan pada sumber pratonton grafik SVG).
Analisis kod:
<feOffset>Atribut elemen ditukar kepada "SourceAlpha" untuk menggunakan imej selepas dalam saluran Alpha sebaliknya daripada keseluruhan piksel RGBA.
Contoh 4
Sekarang gunakan warna pada bayang-bayang:
Berikut ialah kod SVG:
Instance
<!DOCTYPE html> <html> <body> <p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <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="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(#f1)" /> </svg> </body> </html>
Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Untuk pengguna Opera: Lihat fail SVG (klik kanan pada sumber pratonton grafik SVG).
Analisis kod:
<feColorMatrix> Penapis digunakan untuk menukar imej offset kepada warna yang lebih hampir kepada hitam. Tiga nilai matriks '0.2' diperoleh dengan mendarab saluran merah, hijau dan biru. Menurunkan nilainya menjadikan warna menjadi hitam (hitam ialah 0)
