32: SVG filtri za SVG in HTML elemente - CSS-triki

Anonim

Ste morda že slišali za filtre CSS? Lahko jih uporabite za kateri koli element iz CSS, na primer:

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

To lahko uporabite tudi za element HTML ali element SVG.

Obstajajo pa tudi filtri, ki jih lahko določite v SVG, in več možnosti je, ko to storite. Tu je primer definicije:

Nato ga lahko uporabite za element neposredno v SVG, kot je:

Ali pa iz CSS-ja s podobnim sklicevanjem na ID:

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

Obstaja veliko filtrov SVG. Znane, kot so zamegljenost, in čudne, ki uporabljajo slikarske učinke. Tu so specifikacije.