32: Penapis SVG pada Elemen SVG dan HTML - Trik CSS

Mungkin anda pernah mendengar penapis CSS? Anda boleh menerapkannya dengan elemen apa pun dari CSS, seperti:

.apply-css-filter ( -webkit-filter: grayscale(0.5); filter: grayscale(0.5); )

Anda bahkan boleh menerapkannya pada elemen HTML atau elemen SVG.

Tetapi ada juga penapis yang dapat anda tentukan dalam SVG, dan terdapat lebih banyak pilihan ketika anda melakukannya. Inilah definisi contoh:

Anda kemudian boleh menerapkannya ke elemen tepat di SVG seperti:

Atau, dari CSS dengan merujuk ID yang serupa:

.apply-svg-filter ( -webkit-filter: url(#pictureFilter); filter: url(#pictureFilter); )

Terdapat banyak penapis SVG. Orang biasa seperti kabur, dan pelik yang memberi kesan pelukis. Inilah spesifikasi.