Эффекты размытия SVG
<определения> и <фильтр>
Все интернет-фильтры SVG определяются в элементе <defs>. Элемент <defs> является сокращением от определений и содержит определения специальных элементов (таких как фильтры).
Элемент <filter> используется для определения фильтра SVG. Элемент <filter> имеет обязательный атрибут id, который идентифицирует фильтр. Затем рисунок указывает на фильтр, который нужно использовать.
SVG <feGaussianBlur>
Пример 1
Элемент <feGaussianBlur> используется для создания эффектов размытия:
Вот SVG-код:
Пример
<svg height="110" width="110">
<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>
Объяснение кода:
- Атрибут id элемента <filter> определяет уникальное имя фильтра.
- Эффект размытия определяется элементом <feGaussianBlur>.
- Часть in="SourceGraphic" определяет, что эффект создается для всего элемента.
- Атрибут stdDeviation определяет степень размытия.
- Атрибут filter элемента <rect> связывает элемент с фильтром "f1"