Создание масок

В библиотеке Snap.svg маски позволяют управлять видимостью элементов SVG, создавая сложные эффекты прозрачности и вырезов. Маска задается через элемент <mask>, который содержит один или несколько элементов с заливкой или контуром. Основная идея заключается в том, что белые области маски делают объект видимым, а черные — полностью скрытым, промежуточные оттенки создают полупрозрачные зоны.

var s = Snap(400, 400);
var rect = s.rect(50, 50, 300, 300).attr({fill: 'red'});

var mask = s.rect(0, 0, 400, 400).attr({
    fill: '#fff'
});

var circle = s.circle(200, 200, 100).attr({
    fill: '#000'
});

var maskGroup = s.group(mask, circle);
rect.attr({mask: maskGroup});

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

Создание маски из группы элементов

Маска может включать несколько объектов, комбинируя фигуры разной формы. Используется s.group() для объединения элементов и назначение его через атрибут mask:

var mask = s.group(
    s.circle(150, 150, 50).attr({fill: '#fff'}),
    s.rect(200, 200, 100, 100).attr({fill: '#fff'}),
    s.ellipse(300, 100, 40, 80).attr({fill: '#fff'})
);

var target = s.rect(50, 50, 350, 300).attr({fill: 'blue'});
target.attr({mask: mask});

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

Использование градиентов и прозрачности в масках

Snap.svg поддерживает градиенты внутри масок, что позволяет создавать плавные переходы от видимого к скрытому. Для этого можно использовать Snap.gradient() и устанавливать атрибут fill с градиентом:

var gradient = s.gradient("L(0,0,0,1)#fff-#000");
var maskRect = s.rect(0, 0, 400, 400).attr({fill: gradient});

var target = s.rect(50, 50, 300, 300).attr({fill: 'green'});
target.attr({mask: maskRect});

Белый верхний край маски полностью открывает объект, черный нижний — скрывает, а промежуточные оттенки создают плавное затемнение.

Анимация масок

Snap.svg позволяет анимировать элементы маски, создавая динамические эффекты. Например, перемещающийся круг может «открывать» объект по траектории:

var target = s.rect(50, 50, 300, 300).attr({fill: 'orange'});
var maskCircle = s.circle(0, 150, 50).attr({fill: '#fff'});

var mask = s.group(maskCircle);
target.attr({mask: mask});

maskCircle.animate({cx: 400}, 3000, mina.linear);

При таком подходе эффект маски обновляется в реальном времени, создавая анимацию открытия или скрытия объекта.

Маски и сложные фигуры

Маски отлично работают с кривыми и сложными путями. Для этого используется элемент <path> с координатами и заливкой. Например:

var path = s.path("M50,150 C150,50 250,250 350,150").attr({fill: '#fff'});
var target = s.rect(0, 0, 400, 400).attr({fill: 'purple'});

var mask = s.group(path);
target.attr({mask: mask});

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

Комбинирование масок с фильтрами

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

var target = s.rect(50, 50, 300, 300).attr({fill: 'cyan'});
var maskCircle = s.circle(200, 200, 100).attr({fill: '#fff'}).filter(Snap.filter.blur(5));

var mask = s.group(maskCircle);
target.attr({mask: mask});

Размытие маски создаёт мягкие границы видимой области, что позволяет плавно смешивать объекты.

Практические советы

  • Использовать группы: объединение нескольких объектов в s.group() упрощает управление маской.
  • Градиенты для плавности: при необходимости плавного исчезновения объектов лучше использовать градиент или полупрозрачные цвета.
  • Анимации через animate(): динамическое изменение маски создаёт эффект перемещающейся «лампы», освещающей объект.
  • Формы и пути: любые SVG-формы можно использовать в масках — прямоугольники, круги, линии, сложные кривые.

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

Оглавление