Декоративные эффекты

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

Градиенты

Линейные градиенты

Линейный градиент создаётся с помощью метода gradient(). Пример:

const draw = SVG().addTo('body').size(300, 300);
const linear = draw.gradient('linear', function(add) {
    add.stop(0, '#ff0000');
    add.stop(1, '#0000ff');
});

draw.rect(200, 200).fill(linear);
  • add.stop(offset, color) задаёт цветовую остановку градиента.
  • Атрибут offset принимает значения от 0 до 1.
  • Градиент можно использовать для заливки фигур, текста или линий.

Радиальные градиенты

const radial = draw.gradient('radial', function(add) {
    add.stop(0, '#ffff00');
    add.stop(1, '#ff00ff');
});

draw.circle(150).fill(radial);
  • Радиальный градиент создаёт эффект «светящегося центра».
  • Можно комбинировать линейные и радиальные градиенты для сложных декоративных эффектов.

Тени

SVG.js позволяет добавлять тени через фильтры:

const shadow = draw.filterWith(function(add) {
    add.offset(5, 5);
    add.blur(5);
});

draw.rect(100, 100).fill('#00ff00').filterWith(shadow);
  • offset(x, y) задаёт смещение тени.
  • blur(radius) добавляет размытость для более мягкого визуального эффекта.
  • Фильтры можно комбинировать, создавая сложные многослойные тени.

Маски и клиппинг

Маски

Маски позволяют скрывать или показывать части элементов:

const mask = draw.mask();
mask.rect(100, 100).fill('#fff');

draw.circle(150).fill('#ff0000').maskWith(mask);
  • Белые области маски видимы, чёрные скрыты.
  • Используется для создания эффектов вырезов или плавного перехода между объектами.

Клиппинг

Клиппинг похож на маски, но полностью обрезает элементы за пределами фигуры:

const clip = draw.clip();
clip.rect(120, 120);

draw.image('image.jpg').size(200, 200).clipWith(clip);
  • Клиппинг применяется для обрезки изображений или сложных композиций.
  • Можно комбинировать с анимацией для появления объектов «изнутри» фигуры.

Фильтры

SVG.js поддерживает стандартные SVG-фильтры, расширяя декоративные возможности.

const blurFilter = draw.filterWith(function(add) {
    add.gaussianBlur(4);
});

draw.ellipse(150, 80).fill('#00ffff').filterWith(blurFilter);
  • gaussianBlur(radius) размывает элемент.
  • colorMatrix, saturate, hueRotate позволяют изменять цветовую палитру элементов.
  • Фильтры можно применять к группам элементов, сохраняя структуру сцены.

Анимация свойств

Декоративные эффекты усиливаются анимацией:

draw.rect(100, 100).fill('#ff8800').animate(2000, '<>').rotate(360);
  • animate(duration, easing) задаёт длительность и кривую интерполяции.
  • Можно анимировать заливку, прозрачность, трансформации и градиенты.
  • Для циклической анимации используется метод loop():
draw.circle(80).fill('#8800ff')
    .animate(1000, '-')
    .scale(1.5)
    .loop();

Комбинирование эффектов

Все декоративные инструменты SVG.js можно комбинировать:

  • Градиенты + тени для объёмных объектов.
  • Маски + анимация для динамических вырезов.
  • Фильтры + трансформации для создания мягких, «живых» визуальных эффектов.
const grad = draw.gradient('linear', function(add) {
    add.stop(0, '#ff0000');
    add.stop(1, '#0000ff');
});

const shadow = draw.filterWith(f => f.offset(5, 5).blur(4));

draw.rect(150, 150).fill(grad).filterWith(shadow)
    .animate(1500, '<>').rotate(45);

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

Применение групп и слоёв

Группы (group()) позволяют применять эффекты к набору элементов одновременно:

const g = draw.group();
g.rect(50, 50).fill('#ff0');
g.circle(50).fill('#0ff').move(60, 0);

g.animate(2000).rotate(360);
  • Эффекты, фильтры и трансформации, применённые к группе, распространяются на все дочерние элементы.
  • Группы упрощают организацию сложных декоративных композиций.

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

Оглавление