Подсветка элементов

Snap.svg предоставляет гибкий и мощный API для работы с векторной графикой SVG в браузере. Подсветка элементов — один из базовых приёмов интерактивной визуализации, позволяющий изменять внешний вид объектов при наведении мыши, клике или по другим событиям. В основе лежит изменение атрибутов элемента, таких как цвет заливки, обводка, прозрачность, фильтры и трансформации.

Выбор элемента и базовые методы

Для начала необходимо создать экземпляр Snap и выбрать элемент для подсветки:

var s = Snap("#svgCanvas");
var circle = s.circle(100, 100, 50).attr({
    fill: "#3498db",
    stroke: "#2980b9",
    strokeWidth: 2
});

Ключевые методы для работы с подсветкой:

  • element.attr({}) — изменяет атрибуты SVG-элемента.
  • element.animate(attrs, duration, easing, callback) — плавная анимация изменения атрибутов.
  • element.hover(f_in, f_out) — обработка событий наведения и ухода курсора.

Простая подсветка при наведении

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

circle.hover(
    function() { // Наведение
        this.attr({ fill: "#e74c3c", strokeWidth: 4 });
    },
    function() { // Уход
        this.attr({ fill: "#3498db", strokeWidth: 2 });
    }
);

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

  • Метод hover принимает две функции: для события mouseenter и mouseleave.
  • Изменение strokeWidth делает подсветку более заметной.
  • Можно комбинировать изменение цвета и прозрачности (opacity) для эффекта плавного появления.

Плавная анимация подсветки

Snap.svg поддерживает анимацию атрибутов через animate, что позволяет сделать переходы плавными:

circle.hover(
    function() {
        this.animate({ fill: "#e74c3c", strokeWidth: 6 }, 300, mina.easein);
    },
    function() {
        this.animate({ fill: "#3498db", strokeWidth: 2 }, 300, mina.easeout);
    }
);

Параметры метода animate:

  • attrs — объект новых атрибутов.
  • duration — время анимации в миллисекундах.
  • easing — функция сглаживания, предоставляемая Snap.svg (mina.linear, mina.easein, mina.easeout, mina.elastic).
  • callback — функция, вызываемая после завершения анимации.

Использование фильтров для эффекта подсветки

Snap.svg позволяет применять фильтры SVG, например, размытие или свечение:

var glow = s.filter(Snap.filter.blur(5, 5));

circle.hover(
    function() { this.attr({ filter: glow }); },
    function() { this.attr({ filter: null }); }
);

Примечания:

  • Фильтр создаётся через s.filter.
  • Подсветка с фильтром создаёт более выразительный визуальный эффект, чем просто изменение цвета.
  • Можно комбинировать несколько фильтров через цепочку Snap.filter.blur().merge(Snap.filter.shadow()).

Подсветка текста и сложных элементов

Для текста или групп (<g>), подсветка работает аналогично, но с учётом структуры:

var group = s.group(
    s.rect(50, 50, 150, 50).attr({ fill: "#2ecc71" }),
    s.text(75, 80, "Надпись").attr({ fill: "#ffffff", fontSize: 20 })
);

group.hover(
    function() {
        this.select("rect").animate({ fill: "#27ae60" }, 200);
        this.select("text").animate({ fill: "#ffff00" }, 200);
    },
    function() {
        this.select("rect").animate({ fill: "#2ecc71" }, 200);
        this.select("text").animate({ fill: "#ffffff" }, 200);
    }
);

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

  • group.select(selector) позволяет выбирать отдельные элементы внутри группы.
  • Анимации можно синхронизировать для всей группы.
  • Подсветка текста часто используется вместе с изменением фона или добавлением тени.

Динамическая подсветка по данным

Snap.svg хорошо сочетается с данными. Например, изменение цвета элемента в зависимости от значения:

var data = [10, 20, 30, 40];
data.forEach((val, i) => {
    var rect = s.rect(50 + i*60, 150, 50, val * 2).attr({ fill: "#2980b9" });
    rect.hover(
        function() {
            this.animate({ fill: "#f39c12", transform: 's1.1 1.1' }, 200);
        },
        function() {
            this.animate({ fill: "#2980b9", transform: 's1 1' }, 200);
        }
    );
});

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

  • Использование transform добавляет эффект масштабирования.
  • Цвет и размер элементов можно привязывать к внешним данным.
  • Динамическая подсветка усиливает интерактивность диаграмм и графиков.

Применение пользовательских функций подсветки

Можно создавать обобщённые функции подсветки для разных элементов:

function addHighlight(element, options) {
    var colorIn = options.colorIn || "#e74c3c";
    var colorOut = options.colorOut || element.attr("fill");
    var duration = options.duration || 300;

    element.hover(
        function() { this.animate({ fill: colorIn }, duration); },
        function() { this.animate({ fill: colorOut }, duration); }
    );
}

addHighlight(circle, { colorIn: "#9b59b6", duration: 400 });

Преимущества:

  • Универсальность и повторное использование.
  • Лёгкая настройка для разных типов элементов.
  • Упрощение кода при большом количестве интерактивных объектов.

Snap.svg предоставляет богатые возможности для создания интерактивной подсветки: изменение цвета, обводки, прозрачности, трансформаций и фильтров. Комбинирование этих методов позволяет создавать сложные визуальные эффекты, при этом код остаётся компактным и легко поддерживаемым.

Оглавление