SVG фильтры позволяют добавлять различные графические эффекты SVG графике.
<defs> и <filter>
Все SVG фильтры определяются внутри элемента <defs>. Элемент <defs> это сокращение от английского слова "definitions" (пер. "определения") и содержит определение специальных элементов (таких как фильтры).
Элемент <filter> предназначен для определения SVG фильтра. У элемента <filter> должен быть задан обязательный атрибут id, который идентифицирует фильтр. Графический объект затем указывает на этот фильтр.
Элементы SVG фильтров
В SVG доступны следующие элементы фильтров:
- <feBlend> - фильтр для комбинирования изображений
- <feColorMatrix> - фильтр для трансформации цветов
- <feComponentTransfer>
- <feComposite>
- <feConvolveMatrix>
- <feDiffuseLighting>
- <feDisplacementMap>
- <feFlood>
- <feGaussianBlur>
- <feImage>
- <feMerge>
- <feMorphology>
- <feOffset> - фильтр для создания теней
- <feSpecularLighting>
- <feTile>
- <feTurbulence>
- <feDistantLight> - фильтр для освещения
- <fePointLight> - фильтр для освещения
- <feSpotLight> - фильтр для освещения
С любым элементом SVG можно использовать любое количество фильтров!
В данной главе Учебника по SVG графике мы всего лишь продемонстрируем несколько примеров использования SVG фильтров, чтобы вы смогли себе представить возможности SVG графики.
Эффект размытия
Фильтр <feGaussianBlur>.
Пример
Используем элемент <feGaussianBlur>, чтобы создать эффект размытия:
SVG код:
<svg height="110" width="110">
<defs>
<filter id="f0" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f0)" />
</svg>
Объяснение:
- Атрибут id элемента <filter> определяет уникальное имя фильтра
- Эффект размытия создается при помощи элемента <feGaussianBlur>
- Часть in="SourceGraphic" определяет, что эффект создается для всего элемента
- Атрибут stdDeviation определяет размер размытия
- Атрибут filter элемента <rect> связывает ссылкой элемент с фильтром "f1"
Создание тени (<feOffset>)
Для создания эффекта тени используется элемент <feOffset>. Идея состоит в том, что берется графический объект SVG (изображение или графический элемент) и немного сдвигается в XY плоскостях.
Пример
Сначала сдвигается прямоугольник (при помощи элемента <feOffset>), а затем оригинальный прямоугольник накладывается на сдвинутое изображение (при помощи элемента <feBlend>):
SVG код:
<svg height="120" width="120">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
Объяснение:
- Атрибут id элемента <filter> определяет уникальное имя фильтра
- Атрибут filter элемента <rect> связывает ссылкой элемент с фильтром "f1"
Теперь сдвинутое изображение делаем размытым (при помощи элемента <feGaussianBlur>):
SVG код:
<svg height="140" width="140">
<defs>
<filter id="f2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" />
</svg>
Объяснение:
- Атрибут stdDeviation элемента <feGaussianBlur> определяет размер размытия
Теперь делаем тень черной:
SVG код:
<svg height="140" width="140">
<defs>
<filter id="f3" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
</svg>
Объяснение:
- Значение атрибута in элемента <feOffset> изменено на "SourceAlpha", которое использует альфа-канал вместо всего RGBA набора пикселя для создания размытия
Теперь обработаем тень как цвет:
SVG код:
<svg height="140" width="140">
<defs>
<filter id="f4" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" />
</svg>
Объяснение:
- Фильтр <feColorMatrix> используется для трансформации цветов сдвинутого изображения в сторону черного цвета. Три значения '0.2' в матрице умножаются на значения красного, зеленого и синего каналов. Уменьшение их значений сдвигает цвет в сторону черного (значение черного цвета = 0)