Маски и clipping

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

Маски (Mask)

Маска определяет, какие части элемента будут видимыми. В отличие от clipping, маска может использовать градиенты и полупрозрачность, создавая плавные переходы между видимыми и скрытыми областями.

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

Маска создается с помощью метода .maskWith() или через объект mask().

const draw = SVG().addTo('body').size(400, 400);

// Основной элемент
const rect = draw.rect(300, 200).fill('#f06');

// Создание маски
const mask = draw.mask();
mask.circle(100).fill('#fff').move(50, 50); // белая область будет видимой

// Применение маски
rect.maskWith(mask);
  • Белый цвет в маске делает элементы полностью видимыми.
  • Черный цвет скрывает элементы.
  • Полупрозрачные градиенты позволяют создавать плавные эффекты прозрачности.

Динамическое обновление маски

Маски в SVG.js можно изменять в реальном времени, что удобно для анимаций:

mask.clear(); // удаляет все содержимое маски
mask.rect(150, 150).fill('#fff').move(75, 25); // новая область видимости

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

Clipping

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

Создание clipping

const draw = SVG().addTo('body').size(400, 400);

const rect = draw.rect(300, 200).fill('#0f9');
const clip = draw.rect(150, 150).move(75, 25); // форма обрезки

rect.clipWith(clip);
  • Вся часть элемента, находящаяся вне формы clipping, становится невидимой.
  • Clipping поддерживает сложные фигуры: полигоны, круги, эллипсы.

Динамическое изменение clipping

Clipping можно менять на лету, аналогично маскам:

const newClip = draw.circle(100).move(100, 50);
rect.clipWith(newClip);

Разница между маской и clipping

Свойство Маска Clipping
Поддержка прозрачности Да Нет
Основной эффект Плавная видимость Жесткая обрезка
Использование градиентов Да Нет
Анимации Да, легко Да, но только по контуру

Маски и clipping с группами

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

const group = draw.group();
group.rect(100, 100).fill('#f00').move(0, 0);
group.circle(50).fill('#00f').move(50, 50);

const mask = draw.mask();
mask.rect(150, 150).fill('#fff');
group.maskWith(mask);

Для clipping используется аналогичный подход:

const clip = draw.rect(120, 120).move(30, 30);
group.clipWith(clip);

Комбинация масок и анимаций

Маски идеально подходят для создания анимаций с постепенным появлением или исчезновением элементов:

const circle = draw.circle(100).fill('#ff0').move(50, 50);
const mask = draw.mask();
const animRect = mask.rect(0, 100).fill('#fff').move(0, 0);
circle.maskWith(mask);

animRect.animate(2000).width(100); // плавное открытие круга

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

Работа с вложенными масками

SVG.js поддерживает вложенные маски: маска может содержать другие маски или быть применена к группе с уже существующими масками. Это расширяет возможности для сложных визуальных композиций и креативных эффектов.

const mask1 = draw.mask().rect(100, 100).fill('#fff');
const mask2 = draw.mask().circle(50).fill('#fff');
mask1.add(mask2);
rect.maskWith(mask1);

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

  • Для простых обрезок используйте clipping, так как он быстрее и легче для рендеринга.
  • Для плавных переходов и градиентных эффектов предпочтительнее маски.
  • При работе с группами всегда проверяйте координаты маски или clipping, так как смещение группы может изменить эффект.
  • Анимации масок можно комбинировать с трансформациями основного элемента для создания эффектов “рисования” или постепенного появления.

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

Оглавление