32: SVG filtrai ant SVG ir HTML elementų - CSS-gudrybės

Galbūt esate girdėję apie CSS filtrus? Galite juos pritaikyti atlikdami bet kurį CSS elementą, pvz .:

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

Jūs netgi galite tai pritaikyti HTML elementui arba SVG elementui.

Tačiau yra filtrų, kuriuos galite apibrėžti SVG, ir tai galite padaryti daugiau. Štai apibrėžimo pavyzdys:

Tada galite pritaikyti elementą tiesiai SVG, pvz .:

Arba iš CSS panašiai nurodydami ID:

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

Yra daug SVG filtrų. Pažįstami mėgsta neryškumą ir keistus, kurie taiko tapybos efektus. Čia yra spec.