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

Описание фильтров SVG

Все фильтры SVG определяются внутри элемента <defs>. Элемент <defs> является сокращением от definitions (определения). Он содержит определения конкретных элементов, таких как фильтры.

Элемент <filter> определяет фильтр SVG. Этот элемент имеет атрибут id (обязательный), который идентифицирует фильтр. Элемент <filter> не отображается напрямую. Единственное его применение — это ссылка через атрибут filter в SVG и функцию url() в CSS.

Каждый элемент <filter> содержит различные дочерние элементы фильтров. Такие примитивы фильтров выполняют одну основную графическую операцию над одним или несколькими входными данными и выдают только один результат. Помимо использования результатов других примитивов в качестве входных данных, примитив фильтра также может принимать другие входные данные, такие как SourceGraphic и SourceAlpha.

Все элементы фильтров содержат префикс fe, который означает «filter effect» (эффект фильтра).

В настоящее время существует 17 примитивов фильтров, определенных в спецификации SVG Filter.

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

Пример создания эффекта размытия:

Пример создания эффекта размытия

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="150" height="150">
      <defs>
        <filter id="filter" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
        </filter>
      </defs>
      <rect width="110" height="110" stroke="green" stroke-width="5" fill="lightblue" filter="url(#filter)" /> 
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Try it Yourself »

Пояснение к коду:

Атрибут id элемента <filter> задает уникальное имя для фильтра.
Эффект размытия задается с помощью элемента <feGaussianBlur>.
Часть in="SourceGraphic" указывает, что эффект применяется ко всему элементу.
Атрибут stdDeviation указывает степень размытия.
Атрибут filter элемента <rect> связывает элемент с фильтром "filter".

Практика

Каковы функции атрибутов stdDeviation и in в фильтре SVG 'feGaussianBlur'?

Атрибут stdDeviation определяет стандартное отклонение для операции размытия.Атрибут in определяет входные данные для фильтра.Атрибут stdDeviation используется для указания радиуса фильтра.Атрибут in назначает цвет фильтру.Атрибуты stdDeviation и in не имеют конкретной функции в фильтре SVG 'feGaussianBlur'.

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

Описание фильтров SVG ​

Пример создания эффекта размытия: ​

Практика ​

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

Описание фильтров SVG

Пример создания эффекта размытия:

Практика