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

Anonim

Mungkin Anda pernah mendengar tentang filter CSS? Anda dapat menerapkannya untuk melakukan elemen apa pun dari CSS, seperti:

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

Anda bahkan dapat menerapkannya ke elemen HTML atau elemen SVG.

Tetapi ada juga filter yang dapat Anda tentukan dalam SVG, dan ada lebih banyak opsi saat Anda melakukannya. Berikut contoh definisi:

 

Anda kemudian dapat menerapkannya ke elemen tepat di SVG seperti:

 

Atau, dari CSS dengan mereferensikan ID dengan cara serupa:

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

Ada banyak filter SVG. Yang sudah dikenal seperti blur, dan yang aneh yang menerapkan efek melukis. Berikut spesifikasinya.