32: SVG-filtrid SVG- ja HTML-elementidel - CSS-trikid

Võib-olla olete kuulnud CSS-filtritest? Saate neid rakendada, tehes CSS-i mis tahes elemente, näiteks:

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

Saate seda rakendada isegi HTML-elemendile või SVG-elemendile.

Kuid SVG-s on ka filtreid, mida saate määratleda, ja seda tehes on rohkem võimalusi. Siin on näide definitsioonist:

Seejärel saate selle rakendada elemendile otse SVG-s, näiteks:

Või CSS-ist, viidates ID-le sarnaselt:

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

SVG-filtreid on palju. Tuttavatele meeldib hägusus ja imelikud, mis rakendavad maalilisi efekte. Siin on spetsifikatsioon.