SVG -тени

<определения> и <фильтр>

Все фильтры SVG определяются в элементе <defs>. Элемент <defs> является сокращением от определений и содержит определения специальных элементов (таких как фильтры).

Элемент <filter> используется для определения фильтра SVG. Элемент <filter> имеет обязательный атрибут id, который идентифицирует фильтр. Затем рисунок указывает на фильтр, который нужно использовать.

SVG <feOffset>

Пример 1

Элемент <feOffset> используется для создания эффектов тени. Идея состоит в том, чтобы взять графику SVG (изображение или элемент) и немного переместить ее в плоскости xy.

В первом примере прямоугольник смещается (с помощью <feOffset>), а затем смешивается оригинал поверх смещенного изображения (с помощью <feBlend>):

Вот SVG-код:

Объяснение кода:

• Атрибут id элемента <filter> определяет уникальное имя фильтра.
• Атрибут filter элемента <rect> связывает элемент с фильтром "f1"

Пример 2

Теперь смещенное изображение можно размыть (с помощью <feGaussianBlur>):

Вот SVG-код:

Объяснение кода:

• Атрибут stdDeviation элемента <feGaussianBlur> определяет степень размытия.

Пример 3

Теперь сделайте тень черной:

Вот SVG-код:

Объяснение кода:

• Атрибут in элемента <feOffset> изменен на «SourceAlpha», который использует альфа-канал для размытия вместо всего пикселя RGBA.

Пример 4

Теперь относитесь к тени как к цвету:

Вот SVG-код:

Объяснение кода:

• Фильтр <feColorMatrix> используется для преобразования цветов в смещенном изображении ближе к черному. Все три значения «0,2» в матрице умножаются на красный, зеленый и синий каналы. Уменьшение их значений приближает цвета к черному (черный равен 0).