SVG тень
Примечание: Internet Explorer и Safari не поддерживает SVG фильтры!
<Defs> и <фильтр>
SVG фильтрует весь Интернет, определенный в элементе <DEFS>. Элемент <Defs> определяет короткий и содержит специальные элементы (например, фильтры) определения.
<Filter> Тег используется для определения SVG фильтр. <Filter> тег требуемый атрибут идентификатора для определения графическое приложение, которое фильтрует?
SVG <feOffset>
Пример 1
Элемент <FeOffset> используется для создания эффекта тени. Идея заключается в том, чтобы взять SVG графики (или элементы изображения) и переместить его вокруг немного в плоскости ху.
Первый пример смещения прямоугольник (с <feOffset>), а затем смешивают верхнюю смещение изображения (в том числе <feBlend>):
Вот SVG код:
примеров
<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>
Попробуйте »
Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).
Анализ кода:
- Только имя <фильтр> атрибут определяет идентификатор элемента фильтра
- Фильтрующий элемент Свойства <Rect> используется для связывания элементов с "f1" фильтр
Пример 2
Теперь вы можете сместить изображение становится размытым (содержащий <feGaussianBlur>):
Вот SVG код:
примеров
<defs>
<filter id="f1" 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(#f1)" />
</svg>
Попробуйте »
Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).
Анализ кода:
- stdDeviation <feGaussianBlur> Элемент свойство определяет количество размывания
Пример 3
Теперь сделайте черную тень:
Вот SVG код:
примеров
<defs>
<filter id="f1" 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(#f1)" />
</svg>
Попробуйте »
Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).
Анализ кода:
- Свойства <feOffset> элемент "SourceAlpha" использовать размытие в альфа-канале, а не весь RGBA пикселей.
Пример 4
Тень теперь покрыта цветом:
Вот SVG код:
примеров
<defs>
<filter id="f1" 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(#f1)" />
</svg>
Попробуйте »
Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).
Анализ кода:
- <FeColorMatrix> Offset фильтр используется для преобразования изображения, чтобы сделать его ближе к черному цвету. '0,2', чтобы получить три величины умножаются на матрицу красного, зеленого и синего цветов. Уменьшение его стоимости, чтобы принести цвет на черный (черный 0)