32: SVG филтри за SVG и HTML елементи - CSS-трикове

Anonim

Може би сте чували за CSS филтри? Можете да ги приложите да правят всеки елемент от CSS, като:

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

Можете дори да приложите това към HTML елемент или SVG елемент.

Но има и филтри, които можете да дефинирате в SVG, и има повече опции, когато го направите. Ето примерна дефиниция:

 

След това можете да го приложите към елемент точно в SVG като:

 

Или от CSS, като препращате идентификатора по подобен начин:

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

Има много SVG филтри. Познати като размазване и странни, които прилагат живописни ефекти. Ето спецификациите.