Прозрачность и режимы наложения

Прозрачность объектов в SVG.js управляется с помощью свойства opacity. Оно принимает числовое значение от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Для изменения прозрачности элемента используется метод opacity(value):

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

const circle = draw.circle(100).fill('red').move(50, 50);
circle.opacity(0.5); // полупрозрачный круг

Метод opacity() можно вызывать как для одиночного элемента, так и для групп (<g>), что позволяет задавать прозрачность сразу для нескольких объектов. Прозрачность применяется на уровне элемента, то есть дочерние элементы наследуют визуальный эффект родителя, если они находятся внутри группы.

const group = draw.group();
group.add(draw.rect(100, 100).fill('blue'));
group.add(draw.circle(50).fill('yellow').move(25, 25));
group.opacity(0.3); // вся группа становится полупрозрачной

Для анимации прозрачности используется метод animate() совместно с opacity():

circle.animate(1000).opacity(0); // плавное исчезновение

Режимы наложения (blend modes)

SVG.js поддерживает различные режимы наложения элементов, которые управляют тем, как цвета объектов взаимодействуют между собой. Режим наложения задаётся через метод fill() или через CSS свойство mix-blend-mode:

const rect1 = draw.rect(150, 150).fill('red').move(50, 50);
const rect2 = draw.rect(150, 150).fill('blue').move(100, 100);

rect2.css('mix-blend-mode', 'multiply'); // цвета смешиваются с нижним элементом

Основные режимы наложения:

  • normal – стандартное наложение без смешивания
  • multiply – умножение цветов, результат темнее
  • screen – осветление, противоположность multiply
  • overlay – комбинированный эффект затемнения и осветления
  • darken / lighten – выбирает темный или светлый цвет
  • color-dodge / color-burn – интенсивное осветление или затемнение

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

const group = draw.group();
group.add(draw.rect(100, 100).fill('green'));
group.add(draw.circle(80).fill('orange').move(10, 10));
group.css('mix-blend-mode', 'overlay'); // все элементы группы будут смешиваться

Комбинирование прозрачности и режимов наложения

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

const bg = draw.rect(200, 200).fill('purple');
const fg = draw.circle(150).fill('yellow').move(25, 25);

fg.opacity(0.6);
fg.css('mix-blend-mode', 'multiply'); // желтый круг становится зеленым при наложении на фиолетовый фон

Важно помнить, что режимы наложения работают только на видимых пикселях. Если элемент полностью прозрачный (opacity(0)), эффекта смешивания не будет.

Анимация прозрачности с наложением

SVG.js позволяет создавать динамические эффекты с плавной анимацией прозрачности и смешивания цветов. Для этого комбинируются методы animate(), opacity() и CSS-свойства:

const circle = draw.circle(100).fill('red').move(50, 50).opacity(0.2);
circle.animate(2000, '<>').opacity(1).loop(true, true); // пульсирующий эффект
circle.css('mix-blend-mode', 'screen'); // плавное осветление при наложении

Параметр loop(true, true) делает анимацию цикличной с возвратом к исходному состоянию, что удобно для визуализации переходов прозрачности.

Практические рекомендации

  • Для групп элементов рекомендуется задавать прозрачность и режим наложения на уровне группы, чтобы сохранить визуальное единство.
  • При сложных графических эффектах сочетать opacity и mix-blend-mode позволяет добиваться плавного перехода цветов без создания дополнительных слоев.
  • Анимации прозрачности лучше делать через animate() с корректными easing-функциями (<>, <, >, linear) для более естественных визуальных эффектов.
  • Проверять поддержку режимов наложения в браузерах, особенно для мобильных устройств, так как некоторые CSS-режимы могут работать не везде.

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

Оглавление