Mouseover и mouseout

В библиотеке Snap.svg события мыши являются мощным инструментом для создания интерактивной графики. Два базовых события, которые часто применяются для интерактивных эффектов — это mouseover и mouseout. Они позволяют реагировать на наведение курсора на элемент и уход курсора с элемента соответственно.

Привязка событий

Для привязки событий используется метод .hover(), который принимает два коллбэка: первый вызывается при наведении курсора (mouseover), второй — при уходе курсора (mouseout).

Пример создания интерактивного прямоугольника:

var s = Snap("#svg");

// Создание прямоугольника
var rect = s.rect(50, 50, 200, 100).attr({
    fill: "#3498db",
    stroke: "#2980b9",
    strokeWidth: 4
});

// Привязка событий hover
rect.hover(
    function() {
        // mouseover
        this.attr({ fill: "#e74c3c" });
    },
    function() {
        // mouseout
        this.attr({ fill: "#3498db" });
    }
);

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

Отличие hover() от стандартных событий

Хотя в стандартном JavaScript существуют события mouseover и mouseout, метод .hover() объединяет их и делает синтаксис более компактным. Также .hover() обеспечивает корректную работу с SVG-элементами, где стандартные DOM-события могут вести себя нестабильно.

Использование анимаций с hover

Интерактивность можно усилить с помощью метода .animate(). Вместо мгновенной смены атрибутов можно создавать плавные переходы.

rect.hover(
    function() {
        this.animate({ fill: "#2ecc71", transform: "s1.2" }, 300, mina.easein);
    },
    function() {
        this.animate({ fill: "#3498db", transform: "s1" }, 300, mina.easeout);
    }
);

Здесь используется масштабирование элемента (transform: "s1.2") и плавная смена цвета при наведении, а при уходе курсора все возвращается к исходным значениям.

Применение к сложным элементам

События mouseover и mouseout могут применяться не только к простым формам, но и к группам элементов с использованием Snap.group().

var circle1 = s.circle(100, 100, 50).attr({ fill: "#f1c40f" });
var circle2 = s.circle(150, 100, 50).attr({ fill: "#e67e22" });

var group = s.group(circle1, circle2);

group.hover(
    function() {
        this.animate({ transform: "s1.1" }, 200, mina.easein);
    },
    function() {
        this.animate({ transform: "s1" }, 200, mina.easeout);
    }
);

Группа реагирует на наведение как единый объект, что удобно для создания сложных интерактивных интерфейсов.

Передача дополнительных данных

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

var colors = ["#1abc9c", "#9b59b6", "#34495e"];

rect.hover(
    function() {
        var color = colors[Math.floor(Math.random() * colors.length)];
        this.animate({ fill: color }, 300);
    },
    function() {
        this.animate({ fill: "#3498db" }, 300);
    }
);

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

Особенности работы с SVG-контейнерами

События mouseover и mouseout работают только на видимых областях SVG-элементов. Если элемент прозрачный (fill: "none"), наведение может не срабатывать. Для корректной работы рекомендуется использовать pointer-events: all или задавать хотя бы минимальную непрозрачность.

rect.attr({ fill: "none", stroke: "#000", "pointer-events": "all" });

Комбинация с другими событиями

Методы .hover(), .click(), .mousedown() и .mouseup() могут комбинироваться для создания сложных интерактивных эффектов. Например, можно добавить визуальный эффект при наведении, а по клику — запуск анимации или открытие панели.

Эффективное использование mouseover и mouseout в Snap.svg позволяет создавать интерактивные, визуально привлекательные элементы SVG, управлять их состояниями и плавно анимировать изменения атрибутов, делая интерфейс динамичным и отзывчивым.

Оглавление