32: SVG-filtre på SVG- og HTML-elementer - CSS-tricks

Måske har du hørt om CSS-filtre? Du kan anvende dem på ethvert element fra CSS, som:

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

Du kan endda anvende det på et HTML-element eller et SVG-element.

Men der er også filtre, du kan definere inden for SVG, og der er flere muligheder, når du gør det. Her er et eksempel på en definition:

Du kan derefter anvende det på et element lige i SVG som:

Eller fra CSS ved at henvise til ID på samme måde:

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

Der er mange SVG-filtre. Kendte som sløring og underlige, der anvender maleriske effekter. Her er spec.