SVG размытие - Гауссово размывание
Примечание: Internet Explorer и Safari не поддерживает SVG фильтры!
<Defs> и <фильтр>
SVG фильтрует весь Интернет, определенный в элементе <DEFS>. Элемент <Defs> определяет короткий и содержит специальные элементы (например, фильтры) определения.
<Filter> Тег используется для определения SVG фильтр. <Filter> тег требуемый атрибут идентификатора для определения графическое приложение, которое фильтрует?
SVG <feGaussianBlur>
Пример 1
Элемент <FeGaussianBlur> используется для создания эффекта размытия:
Вот SVG код:
примеров
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" 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(#f1)" />
</svg>
<defs>
<filter id="f1" 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(#f1)" />
</svg>
Попробуйте »
Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).
Анализ кода:
- Только имя <фильтр> атрибут определяет идентификатор элемента фильтра
- <FeGaussianBlur> элемент определяет размытие
- в = "SourceGraphic" Этот раздел определяет эффект, созданный всего изображения
- Атрибут stdDeviation определяет степень размытия
- Фильтрующий элемент Свойства <Rect> используется для связывания элементов с "f1" фильтр