HTML5 SVG 2D Pendahuluan 10 - Definisi dan Penggunaan Filter

Penulis：Eve Cole Waktu Pembaruan：2025-04-04 01:00:03

Filter dapat dianggap sebagai fitur SVG yang paling kuat. Mereka memungkinkan Anda untuk menambahkan efek filter yang hanya tersedia dalam perangkat lunak profesional ke grafik (elemen grafik dan elemen kontainer). Ini memudahkan Anda untuk menghasilkan dan memodifikasi gambar di sisi klien. Selain itu, filter tidak menghancurkan struktur dokumen asli, sehingga juga sangat dapat dipelihara.

Filter ditentukan oleh elemen filter : bila diperlukan, tambahkan atribut filter ke grafik atau wadah yang memerlukan efek filter dan merujuk ke filter yang relevan.

Elemen filter berisi banyak operasi atom filter; Setiap operasi atom melakukan operasi grafis dasar pada objek yang masuk dan menghasilkan output grafis. Sebagian besar operasi atom menghasilkan hasil pada dasarnya gambar RGBA. Input untuk setiap operasi atom dapat berupa grafik sumber atau hasil operasi atom lainnya. Oleh karena itu, proses mengutip efek filter adalah menerapkan operasi atom filter yang relevan pada grafik sumber, dan akhirnya menghasilkan grafik baru dan membuatnya.

Saat menggunakan atribut filter pada wadah (seperti elemen G), efek filter akan diterapkan ke semua elemen dalam wadah. Namun, elemen -elemen dalam wadah tidak diterjemahkan langsung ke layar, tetapi disimpan sementara. Perintah grafis kemudian dieksekusi sebagai bagian dari proses pemrosesan elemen filter yang direferensikan, dan kemudian rendering. Ini ditentukan dengan menggunakan SourceGraphic dan Sourcealpha. Efek ini ditunjukkan dalam kasus ketiga dalam contoh kedua di bawah ini.

Beberapa efek filter akan menghasilkan titik piksel yang tidak terdefinisi, yang akan diproses menjadi efek transparan.

Mari kita lihat contoh:

xmlns = "http://www.w3.org/2000/svg" versi = "1.1">

<Title> contoh efek filter svg </iteme>

<desc> Gunakan berbagai efek filter untuk mencapai efek pencahayaan 3D dari sepasang grafik. </desc>

<defs>

<fespecularlighting in = "blur" SurfaceScale = "5" specularconstant = ". 75"

specularexponent = "20" pencahayaan-warna = "#bbbbbbb"

result = "specout">

</fespecularlight>

<fecomposite in = "sourceGraphic" in2 = "specout" operator = "aritmatika"

k1 = "0" k2 = "1" k3 = "1" k4 = "0" hasil = "litpaint"/>

</femerge>

</tilter>

</efs>

<g>

<Path Fill = "None" Stroke = "#D90000" Stroke-Bridth = "10"

D = "M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 Z" />

<Path Fill = "#D90000"

D = "M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 Z" />

</g>

</svg>

Efek dari contoh ini berjalan pada Firefox adalah hasil dari gambar terakhir:

Catatan: Mungkin ada beberapa perbedaan di browser lain.

Filter ini menggunakan 6 efek, pada gilirannya (rendering satu langkah ditampilkan pada gambar di atas :):

Fegaussianblur: Langkah ini adalah untuk melakukan pemrosesan Blur Gaussian; Input dari efek khusus ini adalah nilai transparansi dari gambar sumber, dan output disimpan dalam blur buffered sementara. Nilai Blur digunakan sebagai input FeOffset dan fespecularlight di bawah ini.

FeOffset: Langkah ini adalah untuk menerjemahkan gambar ke dalam beberapa posisi; Input dari efek ini adalah blur yang dihasilkan pada langkah sebelumnya, menghasilkan Cache OffsetBlur baru.

Fespecularlight: Langkah ini adalah memproses permukaan gambar dengan cahaya. Inputnya adalah blur yang dihasilkan pada langkah pertama, dan output disimpan dalam spesifikasi cache baru.

Dua kali Fecomposite: Kedua langkah ini menggabungkan berbagai lapisan cache.

Femerge: Langkah ini adalah untuk menggabungkan lapisan yang berbeda. Langkah ini biasanya merupakan langkah terakhir, menggabungkan lapisan setiap cache, menghasilkan gambar akhir, dan membuatnya. Meskipun langkah ini dapat diselesaikan dengan efek khusus fecomposite beberapa kali, itu masih tidak terlalu nyaman.

elemen filter dan area efek filter

Area efek filter mengacu pada area di mana efek filter bekerja. Ukuran area ini ditentukan oleh sifat -sifat berikut dari elemen filter:

FilterUnits = UsersPaceOnuse | ObjectBoundingBox

Properti ini mendefinisikan ruang koordinat yang digunakan oleh x, y, lebar dan tinggi. Seperti properti terkait unit lainnya, properti ini memiliki dua nilai: UsersPaceOnuse dan ObjectBoundingBox (default).

UsersPaceOnuse mewakili sistem koordinat pengguna yang menggunakan elemen yang merujuk elemen filter.

ObjectBoundingBox berarti menggunakan persentase kotak pembatas yang merujuk elemen filter sebagai rentang nilai.

x, y, lebar, tinggi

Sifat -sifat ini menentukan area persegi panjang di mana filter bekerja. Efek filter tidak akan diterapkan pada poin di luar area ini. Nilai default x, y adalah -10%, dan nilai default lebar dan tinggi adalah 120%.

filterres

Properti ini mendefinisikan ukuran area cache menengah, sehingga juga menentukan kualitas gambar yang di -cache. Biasanya, nilai ini tidak diperlukan, dan browser akan memilih nilai yang sesuai itu sendiri. Secara umum, area efek filter harus didefinisikan untuk sesuai dengan titik latar belakang dan titik satu per satu, yang akan membawa keuntungan efisiensi tertentu.

Selain sifat -sifat ini, sifat -sifat berikut dari elemen filter juga penting:

PrimitiveUnits = UsersPaceOnuse | ObjectBoundingBox

Properti ini mendefinisikan ruang koordinat yang digunakan oleh koordinat dan panjang dalam setiap operasi atom. Nilai properti ini adalah UsersPaceOnuse dan ObjectBoundingBox. Tetapi nilai defaultnya adalah UsersPaceOnuse.

xlink: href = <IRI>

Properti ini digunakan untuk merujuk ke elemen filter lain dalam elemen filter saat ini.

Perlu dicatat bahwa elemen filter hanya akan mewarisi atribut simpul induknya dan tidak akan mewarisi atribut elemen yang merujuk elemen filter.

Filter Ikhtisar

Berbagai operasi atom filter tidak akan dijelaskan secara rinci. Anda bisa memeriksa dokumen resmi saat dibutuhkan. Mari kita lihat kesamaan operasi ini. Kecuali untuk atribut, atribut lain di bawah ini tersedia untuk semua operasi atom.

x, y, lebar, tinggi

Saya tidak akan banyak bicara tentang properti ini. Mereka mendefinisikan area tempat atom filter bekerja, sehingga mungkin juga menjadi area filter. Atribut ini dibatasi oleh area aksi elemen filter. Secara default, nilainya masing -masing adalah 0, 0, 100%, dan 100%. Wilayah aksi atom -atom ini melebihi elemen filter tidak berfungsi.

hasil

Simpan hasil langkah ini. Setelah menentukan hasil, operasi lain selanjutnya dari elemen filter yang sama dapat ditentukan sebagai input yang digunakan. Anda akan mengetahui hal ini dengan merujuk pada contoh di atas. Jika nilai ini dihilangkan, itu hanya dapat digunakan sebagai input implisit untuk langkah berikutnya berikutnya. Perhatikan bahwa jika langkah berikutnya berikutnya telah menentukan input dengan In, yang ditentukan pada langkah berikutnya akan berlaku.

di dalam

Menunjukkan input untuk langkah ini. Jika atribut di dihilangkan, hasil dari langkah sebelumnya akan digunakan secara default sebagai input dari langkah ini. Jika dalam langkah dihilangkan, SourceGraphic akan digunakan sebagai nilainya (lihat deskripsi di bawah). Atribut dalam dapat merujuk pada nilai yang disimpan dalam hasil sebelumnya, atau menentukan 6 nilai khusus berikut :

SourceGraphic: Nilai ini mewakili input untuk menggunakan elemen grafik saat ini sebagai operasi.

Sourcealpha: Nilai ini mewakili input untuk menggunakan nilai alfa elemen grafik saat ini sebagai operasi.

Latar Belakang: Nilai ini mewakili penggunaan tangkapan layar latar belakang saat ini sebagai input untuk operasi.

Backgroundalpha: Nilai ini mewakili input operasi menggunakan nilai alfa tangkapan layar latar belakang saat ini.

FillPaint: Nilai ini menggunakan nilai atribut isi dari elemen grafik saat ini sebagai input ke operasi.

Strokpaint: Nilai ini menggunakan nilai atribut stroke elemen grafis saat ini sebagai input untuk operasi.

Di antara nilai -nilai ini, latar belakang dan latar belakang mungkin sulit dipahami. Mari kita lihat dua nilai di bawah ini.

Akses screenshot latar belakang

Biasanya, kita dapat secara langsung menggunakan tangkapan layar latar dari elemen yang merujuk elemen filter sebagai gambar sumber efek filter. Nilai -nilai yang mewakili input ini adalah latar belakang dan latar belakangalpha, yang sebelumnya berisi nilai warna dan alfa, dan yang terakhir hanya berisi nilai alfa. Untuk mendukung penggunaan ini, juga perlu untuk secara eksplisit mengaktifkan fitur ini pada elemen yang merujuk elemen filter, yang membutuhkan pengaturan properti Enable-background dari elemen.

Enable-Background = Accumulate | BARU [<x> <Yah> <Didth> <Tight>] | mewarisi

Properti ini hanya dapat digunakan untuk elemen kontainer, dan mendefinisikan cara mengambil tangkapan layar latar belakang.

Nilai baru mewakili: memungkinkan elemen anak dari wadah untuk mengakses tangkapan layar latar belakang wadah, dan elemen anak dari wadah diterjemahkan ke latar belakang dan pada perangkat.

Akumulasi adalah nilai default, dan efeknya tergantung pada konteksnya: Jika elemen wadah induk menggunakan Enable-Background: baru, maka semua elemen grafik dari wadah akan berpartisipasi dalam rendering latar belakang. Kalau tidak, itu berarti bahwa wadah induk tidak siap untuk mengambil tangkapan layar latar belakang, dan tampilan elemen grafis dari elemen ini hanya ditampilkan pada perangkat.

Contoh berikut menunjukkan efek dari nilai -nilai ini:

xmlns = "http://www.w3.org/2000/svg" versi = "1.1">

<Title> Contoh menggunakan tangkapan layar latar </iteme>

<desc> Contoh -contoh berikut menjelaskan penggunaan tangkapan layar latar dalam situasi yang berbeda </ desc>

<defs>

<filter id = "shiftbgandblur"

filterUnits = "UsersPaceOnuse" x = "0" y = "0">

<Desc> Filter ini membuang gambar sumber, tetapi menggunakan tangkapan layar latar </ desc>

</tilter>

<filter id = "shiftbgandblur_withsourcegraphic"

filterUnits = "UsersPaceOnuse" x = "0" y = "0">

<desc> Efek khusus filter ini menggabungkan tangkapan layar latar belakang dan gambar elemen saat ini </ desc>

</femerge>

</tilter>

</efs>

<desc> Gambar pertama adalah efek dari tidak menambahkan filter </ desc>

</g>

</g>

<desc> gambar kedua adalah menggunakan efek filter pada wadah </ desc>

</g>

</g>

<desc> Gambaran ketiga adalah menggunakan efek filter pada wadah internal, perhatikan perbedaan dari gambar kedua </ desc>

</g>

</g>

<desc> Gambar keempat adalah menggunakan efek filter pada elemen grafis </ desc>

<Point Polygon = "160,25 160.125 240,75" Isi = "Biru"

filter = "url (#shiftbgandblur)"/>

</g>

</g>

<desc> gambar kelima adalah menggunakan efek filter yang berbeda pada elemen grafis </ desc>

<Point Polygon = "160,25 160.125 240,75" Isi = "Biru"

filter = "url (#shiftbgandblur_withsourcegraphic)"/>

</g>

</g>

</svg>

Rendering adalah sebagai berikut (baris pertama adalah rendering akhir, dan baris kedua adalah efek filter):

Contoh ini berisi 5 bagian :

1. Gambar dalam grup pertama tidak menggunakan efek filter apa pun.

2. Grup kedua menggunakan gambar yang sama, tetapi memungkinkan efek menggunakan latar belakang.

3. Grup ketiga menggunakan gambar yang sama, tetapi menggunakan efek filter dalam wadah internal.

4. Grup keempat menggunakan efek filter pada elemen wadah konten.

5. Grup terakhir menggunakan efek filter yang sama dengan grup keempat dan menggabungkan gambar sumber.

Konsep filter sebenarnya sangat sederhana, tetapi kode untuk setiap efek terlihat lebih rumit. Bahkan, kami akan jelas setelah mencobanya. Namun, karena browser yang berbeda mendukung SVG secara berbeda, efek spesifik harus dicoba sendiri sebelum menggunakannya.

Referensi Praktis

Indeks skrip: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Pusat Pengembangan: https://developer.mozilla.org/en/svg

Referensi Populer: http://www.chinasvg.com/

Dokumen Resmi: http://www.w3.org/tr/svg11/