Инвертированные маски

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

Snap.svg не предоставляет прямого свойства invert для масок, поэтому эффект инверсии достигается комбинацией маски и дополнительного прямоугольника, покрывающего всю область SVG.

Создание базовой инвертированной маски

  1. Инициализация SVG-контейнера:
var s = Snap("#svgContainer");
  1. Создание объекта маски:
var mask = s.mask();
  1. Добавление прямоугольника, покрывающего всю область:
var fullRect = s.rect(0, 0, s.attr("width"), s.attr("height")).attr({
    fill: "#fff"
});
mask.add(fullRect);
  1. Создание фигуры, которую необходимо «вычесть»:
var circle = s.circle(150, 150, 50).attr({
    fill: "#000"
});
mask.add(circle);
  1. Применение маски к элементу:
var rect = s.rect(0, 0, 300, 300).attr({
    fill: "red"
});
rect.attr({ mask: mask });

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

Работа с динамическими фигурами

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

circle.animate({ r: 100 }, 1000, mina.easeinout);

Эта анимация автоматически обновит маску, показывая изменяющийся вырез.

Использование сложных форм

Для сложных фигур вместо простых примитивов (circle, rect, ellipse) можно использовать путь (path):

var star = s.path("M150,100 L160,140 L200,150 L160,160 L150,200 L140,160 L100,150 L140,140 Z").attr({
    fill: "#000"
});
mask.add(star);

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

Слой за слоем: комбинированные маски

Snap.svg позволяет комбинировать несколько инвертированных масок. Для этого создаются несколько масок и применяются к разным элементам или объединяются через <g>:

var maskGroup = s.group();
maskGroup.add(fullRect);
maskGroup.add(circle);
maskGroup.add(star);
mask.attr({ mask: maskGroup });

Такой подход позволяет создавать сложные эффекты с несколькими «окнами» прозрачности.

Оптимизация производительности

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

    • минимизировать количество узлов,
    • использовать простые пути вместо сложных комбинаций,
    • обновлять атрибуты через .attr() вместо полной пересборки маски.

  • В мобильных браузерах и на слабых устройствах инвертированные маски могут потреблять больше ресурсов, чем обычные. В таких случаях стоит ограничивать размер маски или заранее отрисовывать статические участки.

Совместимость с прозрачностью и градиентами

  • Эффект инверсии работает корректно с градиентами, но важно учитывать, что цвет маски сам по себе не влияет на видимость — видимой является область, где маска белая.
  • Прозрачные области маски показывают фон SVG, поэтому для эффектов наложения стоит использовать fill: "#fff" для полного покрытия.

Анимация инвертированных масок

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

circle.animate({ cx: 200, cy: 200, r: 80 }, 1500, mina.elastic);
  • Использование mina позволяет управлять кривой анимации: mina.linear, mina.easein, mina.elastic и др.
  • Комбинируя несколько фигур внутри одной маски, можно добиться сложных визуальных переходов и интерактивных «лупов» видимости.

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

  • Инвертированные маски удобно применять для:

    • Highlight-эффектов — подсветка определённой области при наведении.
    • Динамических окна просмотра — например, «лупа» на изображении.
    • Интерактивных интерфейсов — скрытие или раскрытие элементов по событию.

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

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

Оглавление