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

Kanskje du har hørt om CSS-filtre? Du kan bruke dem til å gjøre hvilket som helst element fra CSS, som:

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

Du kan til og med bruke det på et HTML-element eller et SVG-element.

Men det er også filtre du kan definere i SVG, og det er flere alternativer når du gjør det. Her er et eksempel på definisjon:

Du kan deretter bruke den til et element rett i SVG som:

Eller fra CSS ved å referere til ID på samme måte:

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

Det er mange SVG-filtre. Kjente som uskarphet og rare som bruker malereffekter. Her er spesifikasjonen.