<DEFS> и <фильтр>
Все фильтры Интернет SVG определены в <defs> элемента. <defs> элемент короток для определений и содержит определение специальных элементов (such as filters) .
<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>
Попробуй сам " Code explanation:
- id атрибут <filter> элемент определяет уникальное имя для фильтра
- Эффект размытия определяется с <feGaussianBlur> элемента
- in="SourceGraphic" часть определяет , что эффект создается для всего элемента
- stdDeviation атрибут определяет количество размытия
- filter атрибут <rect> элемент связывает элемент с "f1" фильтр