Kanske har du hört talas om CSS-filter? Du kan använda dem genom att göra vilket element som helst från CSS, som:
.apply-css-filter ( -webkit-filter: grayscale(0.5); filter: grayscale(0.5); )Du kan till och med tillämpa det på ett HTML-element eller ett SVG-element.
Men det finns också filter som du kan definiera inom SVG, och det finns fler alternativ när du gör det. Här är en exempeldefinition:
Du kan sedan tillämpa den på ett element direkt i SVG som:
Eller från CSS genom att referera till ID på samma sätt:
.apply-svg-filter ( -webkit-filter: url(#pictureFilter); filter: url(#pictureFilter); )Det finns många SVG-filter. Kända som oskärpa och konstiga som tillämpar målareffekter. Här är specifikationen.