32: SVG filtri za SVG i HTML elemente - CSS-trikovi

Možda ste čuli za CSS filtre? Možete ih primijeniti na bilo koji element iz CSS-a, poput:

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

To čak možete primijeniti na HTML element ili SVG element.

Ali postoje i filtri koje možete definirati unutar SVG-a, a postoji i više opcija kada to učinite. Evo primjera definicije:

Tada ga možete primijeniti na element izravno u SVG-u, poput:

Ili, iz CSS-a tako što ćete na sličan način uputiti ID:

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

Postoji puno SVG filtara. Poznate poput zamagljivanja i one čudne koje primjenjuju slikarske efekte. Evo specifikacija.