Размытие (blur)

Snap.svg предоставляет удобные средства для работы с фильтрами SVG, среди которых особое место занимает размытие. Размытие позволяет создавать эффект смягчения границ объектов, добавлять глубину и реализовывать визуальные эффекты, характерные для графических редакторов. В основе работы лежит использование фильтров <filter> и элемента <feGaussianBlur>.

Создание простого размытия

Для применения размытия к элементу используется метод .filter(). Основной фильтр размытия выглядит так:

var s = Snap(800, 600);
var circle = s.circle(200, 200, 100).attr({
    fill: "#3498db"
});

var blurFilter = s.filter(Snap.filter.blur(5, 5));
circle.attr({
    filter: blurFilter
});

Пояснение ключевых моментов:

  • Snap.filter.blur(rx, ry) – создаёт фильтр размытия с радиусами по осям X и Y.
  • rx и ry определяют силу размытия: большее значение создаёт более мягкие края.
  • Метод .attr({filter: filter}) применяет фильтр к SVG-элементу.

Анимация размытия

Размытие можно анимировать, создавая плавный переход от одного уровня размытия к другому. Snap.svg позволяет изменять атрибут stdDeviation внутри фильтра с помощью метода .animate().

var blurFilter = s.filter(Snap.filter.blur(0, 0));
circle.attr({
    filter: blurFilter
});

blurFilter.animate({ stdDeviation: "15 15" }, 2000);

Особенности анимации:

  • Атрибут stdDeviation принимает два значения: для горизонтали и вертикали.
  • Значение "0 0" означает отсутствие размытия.
  • Анимация может быть линейной или использовать кривые ускорения (mina.linear, mina.easein, mina.easeout и т.д.).

Комбинирование размытия с другими фильтрами

Snap.svg позволяет объединять несколько фильтров, создавая сложные визуальные эффекты. Размытие часто используется вместе с тенью или цветовой коррекцией.

var shadowFilter = s.filter(
    Snap.filter.shadow(0, 0, 10, "#000", 0.5)
);

var combinedFilter = s.filter(
    Snap.filter.blur(5, 5) + shadowFilter
);

circle.attr({ filter: combinedFilter });

Особенности комбинирования:

  • Складывание фильтров выполняется через оператор +.
  • Порядок применения фильтров имеет значение: сначала применяется первый фильтр, затем второй.
  • Комбинированные фильтры позволяют создавать реалистичные эффекты глубины и объема.

Применение размытия к группам элементов

Размытие может применяться не только к отдельным объектам, но и к группам (<g>), объединяющим несколько элементов SVG.

var group = s.group(
    s.rect(50, 50, 100, 100).attr({ fill: "#e74c3c" }),
    s.circle(150, 150, 50).attr({ fill: "#2ecc71" })
);

var groupBlur = s.filter(Snap.filter.blur(10, 10));
group.attr({ filter: groupBlur });

Особенности работы с группами:

  • Размытие применяется ко всей группе целиком.
  • Эффект распространяется на все вложенные элементы одновременно.
  • Позволяет создавать сложные сцены без индивидуальной настройки фильтров для каждого объекта.

Динамическое изменение размытия через события

Snap.svg позволяет привязывать размытие к событиям, создавая интерактивные эффекты. Например, размытие при наведении:

circle.hover(
    function() { this.attr({ filter: s.filter(Snap.filter.blur(15, 15)) }); },
    function() { this.attr({ filter: s.filter(Snap.filter.blur(0, 0)) }); }
);

Особенности интерактивности:

  • Метод .hover() принимает два обработчика: при наведении и при уходе курсора.
  • Можно создавать эффекты нажатия, перемещения или любых пользовательских событий.
  • Комбинируя с анимацией, можно получить плавное появление и исчезновение размытия.

Настройка параметров stdDeviation вручную

Для более точного контроля над размитием можно создавать фильтр вручную через s.filter() и элемент <feGaussianBlur>:

var manualBlur = s.filter(
    s.el("feGaussianBlur", {
        in: "SourceGraphic",
        stdDeviation: "8 4"
    })
);

circle.attr({ filter: manualBlur });

Особенности ручной настройки:

  • stdDeviation задает степень размытия по осям X и Y.
  • Можно создавать асимметричные эффекты, задавая разные значения для горизонтали и вертикали.
  • Позволяет комбинировать с другими фильтровыми элементами <feColorMatrix>, <feOffset> и т.д.

Практические рекомендации по использованию размытия

  1. Производительность: сильное размытие на больших SVG-объектах может замедлять рендеринг.
  2. Комбинации фильтров: для сложных эффектов предпочтительно комбинировать несколько фильтров в одном <filter>.
  3. Анимация: плавное изменение параметров размытия делает интерфейс более «живым» и приятным для глаз.
  4. Группы и слои: размытие группы объектов удобнее, чем применение фильтра к каждому элементу отдельно.

Размытие в Snap.svg — это гибкий инструмент, позволяющий создавать мягкие визуальные переходы, тени и эффекты глубины. Управление фильтрами через методы .filter(), .animate() и событийные обработчики делает его мощным инструментом для интерактивной графики.

Оглавление