Классы и идентификаторы

В SVG.js каждый графический элемент может иметь класс (class) и идентификатор (id), что позволяет гибко управлять стилями и взаимодействием с элементами. Эти атрибуты интегрируются как с CSS, так и с методами самой библиотеки.

Атрибут id

Каждый SVG-элемент может иметь уникальный идентификатор. В SVG.js это достигается с помощью метода .id(). Пример:

const draw = SVG().addTo('body').size(300, 300);
const circle = draw.circle(100).fill('red').id('myCircle');
  • id должен быть уникальным в пределах документа.
  • Позволяет напрямую ссылаться на элемент через CSS или DOM:
#myCircle {
  stroke: black;
  stroke-width: 5;
}
  • Также можно использовать .find() для поиска элемента по id:
const found = draw.find('#myCircle')[0];
found.fill('blue');

Атрибут class

Атрибут class позволяет присвоить элементу одну или несколько категорий, что удобно для группового применения стилей или взаимодействия.

const rect1 = draw.rect(80, 50).fill('green').addClass('highlight');
const rect2 = draw.rect(60, 60).fill('orange').addClass('highlight');
  • Можно присвоить несколько классов через пробел:
rect1.addClass('highlight active');
  • Проверка наличия класса осуществляется методом .hasClass():
if(rect1.hasClass('active')) {
  rect1.fill('yellow');
}
  • Удаление класса — .removeClass():
rect1.removeClass('highlight');

Модификация классов

SVG.js предоставляет гибкие методы управления классами:

  • .addClass(className) — добавляет класс.
  • .removeClass(className) — удаляет класс.
  • .toggleClass(className) — переключает класс.
  • .hasClass(className) — проверяет наличие класса.

Пример динамического изменения:

rect2.toggleClass('active'); // Добавляет класс, если его нет, или удаляет, если есть

Работа с id и class вместе

Эффективное сочетание классов и идентификаторов облегчает выборку и манипуляции:

const rect3 = draw.rect(50, 50).fill('purple').id('uniqueRect').addClass('highlight');

draw.find('.highlight').forEach(el => el.opacity(0.5));
draw.find('#uniqueRect').stroke({ color: 'black', width: 3 });
  • Все элементы с классом highlight становятся полупрозрачными.
  • Элемент с id='uniqueRect' получает чёрную обводку.

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

SVG.js интегрируется с CSS полностью:

.highlight {
  stroke: blue;
  stroke-width: 2;
}

#uniqueRect {
  fill: purple;
}

Эти стили автоматически применяются к элементам с соответствующими class и id. Можно комбинировать прямое управление через методы библиотеки и стили CSS для более сложных эффектов.

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

  1. Идентификаторы всегда уникальны; для динамически создаваемых элементов лучше использовать генерацию уникального id.
  2. Классы удобны для группировки элементов и массового применения стилей.
  3. Методы .addClass(), .removeClass(), .toggleClass() позволяют создавать динамические интерактивные эффекты.
  4. Комбинация CSS и методов SVG.js дает максимум контроля без прямого вмешательства в DOM.

Динамическое управление атрибутами

Можно динамически менять id и class:

circle.id('newCircleId');
circle.addClass('active');
circle.removeClass('highlight');

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

Группировка с использованием классов

SVG.js поддерживает SVG.Group, и классы могут применяться к группам:

const group = draw.group().addClass('groupHighlight');
group.add(draw.circle(40).fill('red'));
group.add(draw.rect(50, 50).fill('blue'));
  • Все элементы группы наследуют классы, применяемые к группе.
  • Позволяет легко управлять множеством элементов как единым объектом.

Эти методы делают работу с классами и идентификаторами в SVG.js максимально удобной для создания интерактивных и стилизованных SVG-графиков.

Оглавление