SVG Ефекти розмиття
<defs> та <filter>
Усі інтернет-фільтри SVG визначені в елементі <defs>. Елемент <defs> є скороченням від definitions і містить визначення спеціальних елементів (таких як фільтри).
Елемент <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"
