Изменение курсора

Snap.svg предоставляет удобные методы для управления интерактивностью SVG-элементов, включая изменение внешнего вида курсора при наведении на объекты. Управление курсором осуществляется через свойства CSS, применяемые к SVG-элементам.

Использование атрибута cursor

Каждый объект Snap.svg, будь то <circle>, <rect>, <path> или <text>, поддерживает метод .attr(). Для изменения курсора необходимо задать атрибут cursor:

var s = Snap(400, 400);
var circle = s.circle(100, 100, 50);

circle.attr({
    fill: "#3498db",
    stroke: "#2980b9",
    strokeWidth: 3,
    cursor: "pointer" // Изменение курсора при наведении
});

Ключевые моменты:

  • Атрибут cursor работает с любыми допустимыми значениями CSS (pointer, default, move, crosshair, text, wait и др.).
  • Атрибут применяется только к конкретному элементу. Чтобы изменить курсор для всей группы, необходимо использовать <g> или применять атрибут ко всем элементам отдельно.

Изменение курсора через метод hover()

Snap.svg позволяет задавать разные стили курсора при наведении и при уходе мыши через метод .hover():

var rect = s.rect(50, 50, 200, 100, 10, 10).attr({
    fill: "#e74c3c"
});

rect.hover(
    function() {
        this.attr({ cursor: "pointer" });
    },
    function() {
        this.attr({ cursor: "default" });
    }
);

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

  • Первый колбэк выполняется при наведении мыши (mouseenter), второй — при уходе (mouseleave).
  • Позволяет создавать динамическое поведение элементов, улучшая UX интерфейса.

Глобальное изменение курсора для SVG

Если требуется изменить курсор на уровне всей SVG-сцены, можно применять CSS к контейнеру SVG:

s.node.style.cursor = "crosshair";

Примечания:

  • s.node возвращает корневой <svg> элемент, на который можно назначать любые CSS-свойства.
  • Этот подход эффективен для приложений с интерактивными панелями или визуализациями, где курсор должен меняться в зависимости от режима работы.

Комбинация с группами (<g>)

Группы элементов позволяют управлять несколькими объектами одновременно:

var group = s.group(
    s.rect(20, 20, 60, 60),
    s.circle(100, 50, 30)
);

group.attr({ cursor: "move" });

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

  • Удобно для перемещения, перетаскивания и анимации нескольких элементов.
  • Атрибут cursor применяется ко всей группе, исключая необходимость устанавливать его для каждого элемента отдельно.

Применение CSS-классов

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

var circle2 = s.circle(200, 200, 40).addClass("interactive");

document.querySelector(".interactive").style.cursor = "pointer";

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

  • Удобно при работе с большим количеством интерактивных элементов.
  • Позволяет использовать возможности CSS для медийных запросов и псевдоклассов (:hover).

Динамическая смена курсора при событиях

В сочетании с методами .click(), .mousemove() и .drag() можно создавать сложные интерактивные эффекты:

circle.drag(
    function(dx, dy) { 
        this.attr({ cx: this.data('ox') + dx, cy: this.data('oy') + dy });
    },
    function() { 
        this.data('ox', this.attr('cx'));
        this.data('oy', this.attr('cy'));
        this.attr({ cursor: "move" });
    },
    function() { 
        this.attr({ cursor: "pointer" });
    }
);

Пояснения:

  • Первый колбэк отвечает за перемещение элемента.
  • Второй — за начало перетаскивания, задается курсор move.
  • Третий — за завершение перетаскивания, возвращается исходный курсор.

Резюме по методам изменения курсора

  • .attr({cursor: ...}) — базовое средство, применяемое к конкретным элементам или группам.
  • .hover() — динамическая смена курсора при наведении и уходе.
  • s.node.style.cursor — глобальное управление курсором на всей SVG-сцене.
  • CSS-классы и селекторы — централизованное управление стилями курсора для множества элементов.
  • События и drag — интеграция курсора с интерактивными действиями пользователя.

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

Оглавление