НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
Графіка. Уроки W3Schools українською для початківців

En

SVG Ефекти розмиття


<defs> та <filter>

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

Елемент <filter> використовується для визначення фільтра SVG. Елемент <filter> має обов’язковий атрибут id, який ідентифікує фільтр. Потім малюнок вказує на фільтр, який потрібно використовувати.


SVG <feGaussianBlur>

Приклад 1

Елемент <feGaussianBlur> використовується для створення ефектів розмиття:

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"