Цепочки фильтров

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

Создание фильтра

Фильтр создается через метод paper.filter(), где paper — это объект Snap, представляющий холст. Внутри фильтра задаются отдельные операции (эффекты), такие как размытие, цветовые смещения, световые эффекты:

var paper = Snap(400, 400);
var blurFilter = paper.filter(Snap.filter.blur(5, 5));

Здесь Snap.filter.blur(5,5) создает размытие по осям X и Y. Этот фильтр можно применить к любому элементу:

var circle = paper.circle(100, 100, 50);
circle.attr({ fill: "red", filter: blurFilter });

Комбинирование фильтров в цепочку

Основная сила фильтров проявляется при их комбинировании. В Snap.svg цепочки фильтров формируются с помощью метода Snap.filter() и указания нескольких операций через пробел или запятую, а также с использованием параметров in и result для передачи промежуточного результата.

Пример цепочки:

var chainFilter = paper.filter(
    "blur(2,2) brightness(1.5) contrast(2)"
);
circle.attr({ filter: chainFilter });

Каждое последующее преобразование применяется к результату предыдущего. Для сложных цепочек удобно использовать объектный синтаксис, чтобы управлять промежуточными результатами:

var customFilter = paper.filter(
    Snap.filter.blur(2, 2, "SourceGraphic", "blurOut"),
    Snap.filter.colorMatrix("saturate", 0.5, "blurOut", "saturateOut"),
    Snap.filter.colorMatrix("hueRotate", 90, "saturateOut", "final")
);
circle.attr({ filter: customFilter });

SourceGraphic — исходный элемент.
blurOut, saturateOut, final — имена промежуточных результатов, используемых как входные данные для следующего эффекта.

Использование встроенных фильтров Snap.svg

Snap.svg предоставляет ряд встроенных фильтров через Snap.filter:

blur(x, y) — размытие по осям X и Y.
shadow(dx, dy, blur, color) — тень элемента.
grayscale() — перевод изображения в черно-белый.
invert() — инверсия цветов.
brightness(factor) — изменение яркости.
contrast(factor) — изменение контраста.
sepia(factor) — сепия.
hueRotate(angle) — поворот цветового тона.

Каждый из этих фильтров можно комбинировать в цепочку для создания уникального визуального эффекта.

Применение цепочек к разным элементам

Фильтры применяются ко всем элементам Snap.svg: circle, rect, ellipse, path, image, text. Для динамического изменения эффектов можно изменять параметры фильтра и заново назначать его элементу:

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

// Изменение эффекта через секунду
setTimeout(function() {
    var strongerBlur = Snap.filter.blur(10,10);
    circle.attr({ filter: strongerBlur });
}, 1000);

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

Snap.svg поддерживает анимацию фильтров через метод .animate(). Пример плавного увеличения размытия:

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

blur.animate({ stdDeviationX: 10, stdDeviationY: 10 }, 1000);

Важно: для анимации нужно использовать объект фильтра напрямую и анимировать свойства, которые поддерживаются SVG, например stdDeviationX и stdDeviationY для размытия.

Сложные фильтры с масками и источниками

Для более сложных эффектов возможно использовать несколько входных графических объектов и маски:

var paper = Snap(400, 400);
var rect = paper.rect(50,50,100,100).attr({ fill: "blue" });

var filter = paper.filter(
    Snap.filter.blur(3,3, "SourceGraphic", "blurred"),
    Snap.filter.shadow(2,2,5,"rgba(0,0,0,0.5)", "blurred", "shadowed")
);

rect.attr({ filter: filter });

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