SVG shadow
Catatan: Internet Explorer dan Safari tidak mendukung filter SVG!
<Defs> dan <filter>
SVG filter semua Internet yang didefinisikan dalam <defs> elemen. <Defs> mendefinisikan pendek dan mengandung unsur khusus (seperti filter) definisi.
<Filter> tag digunakan untuk mendefinisikan penyaring SVG. <Filter> tag dengan atribut id yang diperlukan untuk menentukan aplikasi grafis yang menyaring?
SVG <feOffset>
contoh 1
<FeOffset> elemen digunakan untuk membuat efek bayangan. Idenya adalah untuk mengambil SVG grafis (atau elemen gambar) dan memindahkannya sekitar sedikit dalam bidang xy.
Contoh pertama diimbangi persegi panjang (dengan <feOffset>), dan kemudian dicampur atas offset gambar (termasuk <feBlend>):
Berikut adalah Kode SVG:
contoh
<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>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
analisis kode:
- -Satunya nama <filter> atribut id elemen mendefinisikan filter
- Filter Properti <rect> elemen digunakan untuk menghubungkan elemen untuk "f1" filter
contoh 2
Sekarang, Anda dapat menggeser gambar menjadi kabur (mengandung <feGaussianBlur>):
Berikut adalah Kode SVG:
contoh
<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>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
analisis kode:
- stdDeviation <feGaussianBlur> properti elemen mendefinisikan jumlah kabur
contoh 3
Sekarang membuat bayangan hitam:
Berikut adalah Kode SVG:
contoh
<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>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
analisis kode:
- Sifat <feOffset> elemen "SourceAlpha" penggunaan blur dalam saluran Alpha, daripada seluruh piksel RGBA.
contoh 4
Bayangan kini dilapisi dengan warna:
Berikut adalah Kode SVG:
contoh
<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>
Coba »
Untuk pengguna Opera: lihat Berkas SVG (klik kanan pada grafik sumber pratinjau SVG).
analisis kode:
- <FeColorMatrix> Offset filter digunakan untuk mengkonversi gambar untuk membuatnya lebih dekat dengan warna hitam. '0,2' untuk mendapatkan tiga nilai dikalikan dengan matriks saluran warna merah, hijau, dan biru. Mengurangi nilainya untuk membawa warna hitam (hitam adalah 0)