32: Фільтри SVG для елементів SVG та HTML - CSS-хитрощі

Можливо, ви чули про фільтри 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. Знайомі такі, як розмиття, і дивні, що застосовують живописні ефекти. Ось специфікація.