Тени (drop shadow)

Snap.svg предоставляет гибкий механизм работы с фильтрами SVG, что позволяет создавать эффекты тени для графических элементов. Эффект тени реализуется через SVG-фильтры, которые можно применять к любому элементу с помощью атрибута filter.

Определение фильтра для тени

Фильтр для тени создаётся с использованием элемента <filter> и включения в него эффекта размытия (<feGaussianBlur>) и смещения (<feOffset>):

var s = Snap(800, 600);

// Определение фильтра
var shadowFilter = s.filter(Snap.filter.shadow(5, 5, 5, "#000", 0.5));

Параметры метода Snap.filter.shadow:

  • dx — смещение тени по оси X. Положительное значение смещает вправо, отрицательное — влево.
  • dy — смещение тени по оси Y. Положительное значение смещает вниз, отрицательное — вверх.
  • blur — радиус размытия тени. Чем больше, тем мягче границы.
  • color — цвет тени.
  • opacity — прозрачность тени (от 0 до 1).

Применение тени к элементу

После создания фильтра его можно применить к любому элементу SVG через метод attr:

var rect = s.rect(100, 100, 200, 150).attr({
    fill: "#3498db",
    filter: shadowFilter
});

В этом примере прямоугольник получает мягкую чёрную тень с прозрачностью 50%.

Множественные тени

Для создания эффекта нескольких теней можно объединять фильтры через цепочку элементов <feMerge> или создавать несколько фильтров с различными параметрами:

var softShadow = s.filter(Snap.filter.shadow(3, 3, 2, "#000", 0.3));
var hardShadow = s.filter(Snap.filter.shadow(6, 6, 0, "#000", 0.7));

var circle = s.circle(400, 300, 80).attr({
    fill: "#e74c3c",
    filter: softShadow
});

// Позже можно сменить фильтр
circle.attr({filter: hardShadow});

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

Настройка цвета и прозрачности

Для более сложного управления визуальной составляющей тени используется CSS-подобная настройка цветов с альфа-каналом:

var customShadow = s.filter(Snap.filter.shadow(4, 4, 6, "rgba(0,0,0,0.6)"));
var ellipse = s.ellipse(600, 200, 100, 60).attr({
    fill: "#2ecc71",
    filter: customShadow
});

Использование rgba позволяет создавать более реалистичные полупрозрачные тени, которые плавно смешиваются с фоном.

Создание собственных фильтров SVG

Помимо встроенного Snap.filter.shadow, можно создавать полностью кастомные фильтры с использованием <feGaussianBlur>, <feOffset>, <feMerge> и других элементов SVG-фильтров:

var customFilter = s.filter(
    '<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>' +
    '<feOffset dx="5" dy="5" result="offsetblur"/>' +
    '<feFlood flood-color="rgba(0,0,0,0.4)"/>' +
    '<feComposite in2="offsetblur" operator="in"/>' +
    '<feMerge>' +
        '<feMergeNode/>' +
        '<feMergeNode in="SourceGraphic"/>' +
    '</feMerge>'
);

var star = s.polygon([50,150, 150,50, 250,150, 200,250, 100,250]).attr({
    fill: "#f1c40f",
    filter: customFilter
});

Эта конструкция создаёт тень с размытой границей и настраиваемым цветом, позволяя добиться более художественного эффекта по сравнению со стандартным Snap.filter.shadow.

Анимация тени

С помощью Snap.svg можно динамически изменять параметры фильтра, создавая анимацию смещения или размытия тени:

rect.animate({filter: s.filter.shadow(20, 20, 15, "#000", 0.8)}, 1000, mina.easeinout);

Таким образом, тень может реагировать на события, имитировать движение источника света или изменять глубину объекта.

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

  • Минимизировать количество фильтров для сложных сцен, так как каждый фильтр влияет на производительность.
  • Использовать rgba цвета для плавных переходов и мягких теней.
  • Комбинировать смещение и размытие для создания эффекта «глубины» и реалистичности.
  • Анимация фильтров может быть использована для интерактивных интерфейсов и игр, создавая визуальную динамику элементов.

Тщательная настройка фильтров и понимание принципов работы feGaussianBlur и feOffset позволяет полностью контролировать визуальную составляющую тени и добиваться профессиональных эффектов в SVG-графике с Snap.svg.

Оглавление