32: SVG szűrők az SVG és HTML elemeken - CSS-trükkök

Talán hallottál már a CSS szűrőkről? Alkalmazhatja őket bármely elemre a CSS-ből, például:

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

Ezt akár HTML elemre vagy SVG elemre is alkalmazhatja.

De vannak olyan szűrők is, amelyeket meghatározhat az SVG-n belül, és több lehetőség is van, amikor ezt megteszi. Íme egy példa meghatározás:

Ezután alkalmazhatja közvetlenül az SVG egyik elemére, például:

Vagy a CSS-ből az azonosító hasonló hivatkozásával:

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

Nagyon sok SVG szűrő van. Az ismerősek szeretik az elmosódást, és a furcsaakat, amelyek festői hatásokat alkalmaznak. Itt a specifikáció.