Тени и размытие

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

Тени (Drop Shadow)

Тень создается с помощью фильтра filter в SVG. В SVG.js это реализуется через метод .filter() и встроенные фильтры, такие как shadow().

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

const rect = draw.rect(150, 100).fill('#3498db');

// Создание тени
rect.filterWith(function(add) {
  add.shadow({ x: 5, y: 5, blur: 10, color: '#2c3e50' });
});

Ключевые параметры метода shadow:

  • x и y — смещение тени по горизонтали и вертикали.
  • blur — радиус размытия тени.
  • color — цвет тени.

Можно применять тень к любому элементу SVG, включая круги, эллипсы, линии и группы элементов.

const circle = draw.circle(100).fill('#e74c3c');
circle.filterWith(f => f.shadow({ x: 8, y: 8, blur: 15, color: 'rgba(0,0,0,0.5)' }));

Размытие (Blur)

Размытие позволяет создавать мягкие границы и эффекты свечения. В SVG.js размытие реализуется через метод .filter() с фильтром blur().

const ellipse = draw.ellipse(200, 100).fill('#2ecc71');

// Применение размытия
ellipse.filterWith(f => f.blur(5));

Особенности:

  • Параметр blur задает радиус размытия.
  • Можно комбинировать с другими фильтрами, включая тени и цветовые коррекции.
  • Размытие можно анимировать, создавая динамичные визуальные эффекты.

Комбинирование теней и размытия

SVG.js позволяет накладывать несколько фильтров на один объект для создания сложных эффектов.

const star = draw.polygon('50,0 61,35 98,35 68,57 79,91 50,70 21,91 32,57 2,35 39,35').fill('#f1c40f');

star.filterWith(f => {
  f.shadow({ x: 4, y: 4, blur: 10, color: 'rgba(0,0,0,0.6)' });
  f.blur(3);
});

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

Использование фильтров на группах элементов

Для применения эффекта к нескольким элементам одновременно, их можно объединить в group().

const group = draw.group();
group.rect(80, 80).fill('#1abc9c').move(20, 20);
group.circle(60).fill('#e67e22').move(60, 40);

// Применяем тень ко всей группе
group.filterWith(f => f.shadow({ x: 6, y: 6, blur: 12, color: '#34495e' }));

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

Анимация теней и размытия

SVG.js поддерживает плавную анимацию фильтров через .animate().

const animatedRect = draw.rect(100, 100).fill('#9b59b6').move(50, 50);

animatedRect.filterWith(f => f.shadow({ x: 0, y: 0, blur: 5, color: 'rgba(0,0,0,0.5)' }));

// Анимация смещения тени
animatedRect.animate(2000, '<>').during((pos, morph, eased) => {
  animatedRect.filterWith(f => f.shadow({ x: 20 * eased, y: 20 * eased, blur: 10, color: 'rgba(0,0,0,0.5)' }));
}).loop();

Особенности анимации:

  • Метод during() позволяет обновлять параметры фильтра на каждом кадре.
  • Параметр eased отвечает за плавность перехода.
  • Можно анимировать как смещение тени, так и степень размытия.

Продвинутые фильтры

SVG.js позволяет создавать собственные фильтры, комбинируя несколько эффектов. Например, тень + размытие + цветовое смещение.

const customCircle = draw.circle(120).fill('#e74c3c');

customCircle.filterWith(f => {
  const shadow = f.shadow({ x: 6, y: 6, blur: 8, color: 'rgba(0,0,0,0.5)' });
  const blur = f.blur(2);
  // Можно комбинировать через merge
  f.merge([shadow, blur]);
});

Метод merge() позволяет объединить несколько фильтров в один для оптимизации рендеринга.

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

  • Для производительности лучше применять фильтры к группам, а не каждому элементу по отдельности.
  • Цвета тени можно задавать с прозрачностью для более естественного эффекта.
  • Анимации теней и размытия могут влиять на FPS, особенно при больших SVG-элементах.
  • Эксперимент с разными радиусами размытия и смещениями создает уникальные визуальные стили.

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

Оглавление