32: Filtre SVG pentru elemente SVG și HTML - CSS-Tricks

Poate ați auzit de filtrele CSS? Le puteți aplica pentru orice element din CSS, cum ar fi:

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

Puteți chiar să aplicați acest lucru unui element HTML sau unui element SVG.

Dar există, de asemenea, filtre pe care le puteți defini în SVG și există mai multe opțiuni atunci când faceți acest lucru. Iată un exemplu de definiție:

Apoi îl puteți aplica unui element chiar în SVG, cum ar fi:

Sau, din CSS, referindu-se la ID în mod similar:

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

Există multe filtre SVG. Cei cunoscuți cum ar fi neclaritatea și cele ciudate care aplică efecte picturale. Iată specificațiile.