Применение масок к элементам

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

Для создания маски используется метод mask(), который применяется к элементу:

var s = Snap(400, 400);
var rect = s.rect(0, 0, 200, 200).attr({fill: "#3498db"});
var maskRect = s.rect(50, 50, 100, 100).attr({fill: "#fff"});
rect.attr({mask: maskRect});

В этом примере создаётся прямоугольник rect, к которому применяется маска maskRect. Видимой остаётся только область маски, залитая белым цветом.

Создание сложных масок

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

var s = Snap(400, 400);
var circle = s.circle(200, 200, 150).attr({fill: "#e74c3c"});

var maskGroup = s.group();
maskGroup.add(s.rect(100, 100, 200, 200).attr({fill: "#fff"}));
maskGroup.add(s.circle(200, 200, 50).attr({fill: "#000"}));

circle.attr({mask: maskGroup});

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

Ключевой момент: элементы маски работают по принципу наложения — белый = видимо, черный = невидимо, серый = полупрозрачно.

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

Для создания плавного эффекта можно использовать градиенты в масках. Градиент задаётся с помощью Snap.gradient() или атрибутов fill с линейным или радиальным градиентом:

var s = Snap(400, 400);
var rect = s.rect(0, 0, 400, 400).attr({fill: "#2ecc71"});

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

rect.attr({mask: gradient});

Белый край градиента остаётся полностью видимым, а черный — полностью скрывает элемент. Плавное изменение оттенков создаёт эффект постепенной прозрачности.

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

Маски можно анимировать так же, как и обычные элементы SVG. Это позволяет создавать динамические визуальные эффекты, например, «проявление» элемента:

var s = Snap(400, 400);
var rect = s.rect(0, 0, 400, 400).attr({fill: "#9b59b6"});

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

maskRect.animate({width: 400}, 2000, mina.easeinout);

Здесь маска увеличивает свою ширину от 0 до 400 пикселей, постепенно открывая объект.

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

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

var s = Snap(400, 400);

var group = s.group();
group.add(s.circle(100, 200, 50).attr({fill: "#f1c40f"}));
group.add(s.rect(150, 150, 100, 100).attr({fill: "#e67e22"}));

var mask = s.rect(50, 50, 200, 200).attr({fill: "#fff"});
group.attr({mask: mask});

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

Маски с изображениями

Snap.svg позволяет использовать изображения в качестве масок. Для этого создаётся элемент <image> и применяется как маска:

var s = Snap(400, 400);
var img = s.image("background.jpg", 0, 0, 400, 400);

var maskImg = s.image("mask.png", 0, 0, 400, 400);
img.attr({mask: maskImg});

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

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

Маски можно сочетать с фильтрами для усиления визуального эффекта. Например, маска может задавать форму, а фильтр — размытость или цветовую коррекцию:

var s = Snap(400, 400);
var rect = s.rect(0, 0, 400, 400).attr({fill: "#1abc9c"});

var mask = s.circle(200, 200, 100).attr({fill: "#fff"});
rect.attr({mask: mask});

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

Эффект маски и фильтра объединяется: видимая область остаётся ограниченной формой маски, при этом применяется размытие к видимому участку.

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

  • Использовать белый цвет для видимых областей, черный для скрытых, серый для полупрозрачных эффектов.
  • Маску можно анимировать для динамических эффектов, изменения прозрачности или открытия объекта.
  • Маски группируют элементы, что позволяет создавать сложные интерфейсы и композиции.
  • Маски могут комбинироваться с градиентами, изображениями и фильтрами для продвинутых визуальных решений.
  • Все элементы маски остаются в SVG DOM, поэтому их можно модифицировать в процессе работы, изменяя форму или анимацию.

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

Оглавление