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. Знакомые, вроде размытия, и странные, в которых применяются живописные эффекты. Вот спецификация.