32: filtri SVG su elementi SVG e HTML - Trucchi CSS

Forse hai sentito parlare dei filtri CSS? Puoi applicarli con qualsiasi elemento da CSS, come:

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

Puoi persino applicarlo a un elemento HTML o SVG.

Ma ci sono anche filtri che puoi definire all'interno di SVG e ci sono più opzioni quando lo fai. Ecco una definizione di esempio:

Puoi quindi applicarlo a un elemento direttamente nell'SVG come:

Oppure, dal CSS facendo riferimento all'ID in modo simile:

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

Ci sono molti filtri SVG. Quelli familiari come la sfocatura e quelli strani che applicano effetti pittorici. Ecco le specifiche.