<DEFS> и <фильтр>
Все фильтры SVG определены в <defs> элемента. <defs> элемент короток для определений и содержит определение специальных элементов (such as filters) .
<filter> элемент используется для определения SVG фильтр. <filter> элемент имеет обязательный атрибут ID , который идентифицирует фильтр. Графический затем указывает на фильтр для использования.
SVG <feOffset>
Пример 1
<feOffset> Элемент используется для создания эффектов отбрасывания тени. Идея заключается в том , чтобы взять SVG графику (image or element) и переместите его немного в плоскости ху.
Первый пример смещает прямоугольник (with <feOffset>) , а затем смешать оригинал на верхней части изображения смещения (with <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>
Попробуй сам " Code explanation:
- id атрибут <filter> элемент определяет уникальное имя для фильтра
- filter атрибут <rect> элемент связывает элемент с "f1" фильтр
Пример 2
Теперь, смещение изображения может быть размыта (with <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>
Попробуй сам " Code explanation:
- stdDeviation атрибут <feGaussianBlur> элемент определяет величину размытия
Пример 3
Теперь сделайте тень черный:
Вот код 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>
Попробуй сам " Code explanation:
- in атрибуте <feOffset> элемента изменяется на "SourceAlpha" , который использует альфа - канал для размытия вместо всего RGBA пикселя
Пример 4
Теперь, рассматривать тень как цвет:
Вот код 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>
Попробуй сам " Code explanation:
- <feColorMatrix> фильтр используется для преобразования цвета в изображении смещения ближе к черному. Три значения '0,2' в матрице все получают умножаются на красный, зеленый и синий каналы. Снижение их ценности приносит цвета ближе к черному (black is 0)