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

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

Установка курсора через метод style()

Каждый элемент SVG в SVG.js наследует методы для работы со стилями. Метод style() позволяет задавать CSS-свойства напрямую.

const draw = SVG().addTo('body').size(400, 400);
const rect = draw.rect(100, 100).fill('#3498db');

// Установка курсора "pointer" при наведении
rect.style('cursor', 'pointer');

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

  • Свойство cursor поддерживает стандартные значения CSS: default, pointer, crosshair, move, text и другие.
  • Метод style() позволяет как задавать отдельное свойство, так и несколько через объект:
rect.style({ cursor: 'crosshair', fill: '#e74c3c' });

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

SVG.js интегрируется с системой событий JavaScript. Курсор можно менять при наведении, клике или уходе мыши с элемента.

rect.on('mouseover', () => rect.style('cursor', 'grab'));
rect.on('mouseout', () => rect.style('cursor', 'default'));
rect.on('mousedown', () => rect.style('cursor', 'grabbing'));
rect.on('mouseup', () => rect.style('cursor', 'grab'));

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

  • События mouseover и mouseout позволяют реализовать визуальные эффекты при наведении.
  • События mousedown и mouseup полезны для создания интерактивных перетаскиваемых объектов.

Изменение курсора для группы элементов

SVG.js позволяет объединять элементы в группы (group). Для группы можно назначить стиль курсора, который автоматически применяется ко всем вложенным элементам.

const group = draw.group();
const circle = draw.circle(80).fill('#2ecc71');
const ellipse = draw.ellipse(100, 50).fill('#f1c40f');

group.add(circle).add(ellipse);
group.style('cursor', 'move');

При наведении на любой элемент группы курсор меняется на move.

Использование CSS-классов с SVG.js

SVG.js поддерживает работу с классами, что позволяет задавать курсор через CSS.

rect.addClass('interactive');

// CSS
/*
.interactive {
  cursor: pointer;
}
*/

Преимущества подхода через классы:

  • Легко изменять стиль для множества элементов одновременно.
  • Упрощает поддержку кода и позволяет централизованно управлять курсором через CSS.

Кастомные курсоры с помощью URL

Для более сложных интерфейсов можно использовать собственные изображения курсоров.

rect.style('cursor', 'url(cursor.png), auto');

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

  • url() указывает путь к изображению курсора.
  • Резервное значение (auto) используется в случае, если изображение не загрузилось.
  • Рекомендуется использовать изображения в формате .png или .cur с размерами 32x32 пикселя для корректного отображения.

Интерактивные эффекты при перетаскивании

SVG.js в сочетании с курсорами позволяет реализовать функционал перетаскивания:

rect.draggable();

rect.on('dragstart', () => rect.style('cursor', 'grabbing'));
rect.on('dragend', () => rect.style('cursor', 'grab'));
  • Метод draggable() активирует возможность перемещения элемента.
  • События dragstart и dragend позволяют динамически менять курсор, создавая естественный визуальный отклик.

Общие рекомендации по курсорам в SVG.js

  • Выбор курсора должен соответствовать действию пользователя: pointer для кликабельных объектов, move для перемещения, text для текстовых областей.
  • Стилизация через style() подходит для единичных элементов, тогда как CSS-классы удобны для групп.
  • Динамические изменения через события повышают интерактивность интерфейса.

Такой подход позволяет создавать интуитивно понятные и визуально приятные интерактивные SVG-интерфейсы, полностью управляя поведением курсора на элементах.

Оглавление