Эффект размытия SVG

SVG использует элемент <feGaussianBlur> для отображения эффекта размытия. Фильтр <feGaussianBlur> производит высокосинусоидальное размытие входного изображения, фильтры SVG не поддерживаются в Internet Explorer 9 и более ранних версиях.

<svg height="250" width="250">
　　<defs>
　　　　<filter id="p1" x="0" y="0">
　　　　　　<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
　　　　</filter>
　　</defs>
　　<rect width="120" height="120" stroke="green" stroke-width="3" fill="purple" filter="url(#p1)" />
</svg>

Эффект изображения, созданного после выполнения, будет следующим:

Объяснение использования

• Свойство id элемента <filter> определяет уникальное имя шаблона.

• Элемент <feGaussianBlur> используется для определения эффекта размытия.

• Часть in = «SourceGraphic» элемента <feGaussianBlur> используется для определения эффекта, созданного для всего элемента.

• Свойство stdDeviation используется для определения количества размытия.

• Свойство filter элемента <rect> используется для связи элемента с фильтром «p1».