Фильтры и эффекты

Фильтры в SVG.js позволяют создавать визуальные эффекты, изменяющие внешний вид элементов SVG. Они работают через объект filter(), который можно применять к любому графическому элементу. Каждый фильтр состоит из цепочки примитивов, таких как размытие, смешивание или преобразование цветов.

Пример создания простого фильтра размытия:

const draw = SVG().addTo('body').size(400, 400);
const rect = draw.rect(200, 200).fill('#ff6600');

// Создание фильтра размытия
const blurFilter = draw.filter();
blurFilter.blur(5);
rect.filter(blurFilter);

Здесь blur(5) применяет размытие радиусом 5 пикселей. Фильтры можно комбинировать, создавая сложные визуальные эффекты.

Типы фильтров и их применение

1. Размытие (Blur) Размытие делает элемент мягче и размывает края. В SVG.js используется метод blur(value). Значение задается в пикселях.

2. Контраст и яркость (Color Matrix) Фильтры на основе цветовой матрицы позволяют изменять насыщенность, контраст, яркость и цветовой тон.

const brightnessFilter = draw.filter();
brightnessFilter.colorMatrix('saturate', 2); // Увеличение насыщенности
rect.filter(brightnessFilter);

Метод colorMatrix(type, value) поддерживает типы saturate, hueRotate, luminanceToAlpha и другие.

3. Тень (Drop Shadow) Создание тени осуществляется через примитив shadow().

const shadowFilter = draw.filter();
shadowFilter.shadow(5, 5, 10, '#000');
rect.filter(shadowFilter);

Параметры: смещение по X и Y, радиус размытия и цвет.

4. Комбинированные фильтры Фильтры можно объединять, применяя несколько эффектов к одному элементу.

const combinedFilter = draw.filter();
combinedFilter.blur(3).colorMatrix('saturate', 1.5).shadow(2, 2, 5, '#333');
rect.filter(combinedFilter);

При этом порядок применения эффектов имеет значение: сначала выполняется первый метод цепочки, затем второй и т.д.

Эффекты на градиентах и масках

Фильтры можно применять не только к отдельным фигурам, но и к градиентам и маскам. Это открывает возможности для создания сложных визуальных переходов.

const circle = draw.circle(150).fill('url(#myGradient)');
const gradientFilter = draw.filter().blur(4);
circle.filter(gradientFilter);

Таким образом, даже градиентные заливки могут приобретать размытие или изменять цветовую насыщенность.

Анимация фильтров

SVG.js позволяет анимировать фильтры, создавая динамичные визуальные эффекты. Например, размытие может плавно изменяться:

const animRect = draw.rect(100, 100).fill('#00ccff');
const animFilter = draw.filter().blur(0);
animRect.filter(animFilter);

animFilter.animate(2000, '<>').blur(10).loop(true, true);

Метод animate(duration, easing) задаёт длительность анимации и кривую ускорения, а loop(true, true) позволяет бесконечно воспроизводить анимацию вперед-назад.

Практические рекомендации

  • Оптимизация производительности: сложные фильтры и большие радиусы размытия могут сильно нагружать рендеринг.
  • Совместимость с браузерами: большинство фильтров поддерживаются современными браузерами, но стоит проверять старые версии.
  • Композиция эффектов: для сложных сцен лучше разбивать фильтры на отдельные цепочки и применять их выборочно, чтобы избежать избыточной нагрузки на DOM.

Расширенные возможности

1. Применение пользовательских примитивов Можно создавать собственные фильтры через метод add(), добавляя элементы <feGaussianBlur>, <feOffset>, <feBlend> и другие.

const customFilter = draw.filter();
customFilter.add(new SVG.FilterElement('feTurbulence', { type: 'turbulence', baseFrequency: 0.05 }));
rect.filter(customFilter);

2. Интерактивные фильтры Фильтры можно менять в ответ на события пользователя: hover, click, drag.

rect.on('mouseover', () => rect.filter(draw.filter().blur(8)));
rect.on('mouseout', () => rect.filter(null));

Так реализуются эффекты наведения, подсветки и динамические визуальные отклики на действия пользователя.

Фильтры и эффекты в SVG.js открывают полный контроль над визуальной частью графики, сочетая простоту применения с мощными возможностями кастомизации и анимации.

Оглавление