Работа с CSS-классами

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

Добавление и удаление классов

Метод addClass() используется для добавления одного или нескольких CSS-классов к элементу:

const draw = SVG().addTo('body').size(300, 300);
const rect = draw.rect(100, 100).fill('#f06');

rect.addClass('highlight');
rect.addClass('shadowed rounded'); // можно добавлять сразу несколько классов

Метод removeClass() удаляет указанный класс или несколько классов:

rect.removeClass('highlight');
rect.removeClass('shadowed rounded'); // удаление нескольких классов одновременно

Если класс отсутствует, removeClass() не вызовет ошибки, операция выполняется безопасно.

Проверка наличия класса

Метод hasClass() позволяет проверить, присутствует ли класс у элемента. Возвращается булево значение:

if (rect.hasClass('highlight')) {
    rect.fill('#0f6'); // изменение цвета, если есть класс highlight
}

Переключение классов

Метод toggleClass() позволяет добавлять класс, если его нет, или удалять, если он есть, что особенно удобно при создании интерактивных элементов:

rect.toggleClass('active'); // добавляет или удаляет класс 'active'

Можно использовать второй параметр force для явного добавления или удаления:

rect.toggleClass('active', true);  // гарантированно добавляет
rect.toggleClass('active', false); // гарантированно удаляет

Применение классов к группам

SVG.js позволяет группировать элементы с помощью group(). Методы работы с классами применимы и к группам, что облегчает массовую стилизацию:

const group = draw.group();
const circle1 = group.circle(50).fill('#ff0');
const circle2 = group.circle(50).fill('#0ff');

group.addClass('fancy-group'); // все элементы внутри наследуют стиль

Добавление класса к группе не меняет атрибут class у отдельных элементов, но позволяет через CSS обращаться к элементам внутри группы:

.fancy-group circle {
    stroke: black;
    stroke-width: 2;
}

Работа с классами через атрибут class

Все методы addClass, removeClass, toggleClass — это удобная обёртка над стандартным SVG-атрибутом class. Можно также управлять классами напрямую через attr():

rect.attr('class', 'highlight shadowed');

Однако использование встроенных методов обеспечивает более безопасное и предсказуемое добавление и удаление классов без риска перезаписать существующие.

Комбинация с CSS-анимациями

CSS-классы можно использовать для динамических эффектов, таких как переходы и анимации:

.highlight {
    fill: #f06;
    transition: fill 0.5s ease;
}

.active {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}

В Jav * aScript:

rect.addClass('highlight');
setTimeout(() => rect.toggleClass('active'), 500);

Это позволяет реализовать плавные визуальные эффекты без использования методов анимации SVG.js, комбинируя декларативное CSS с возможностями библиотеки.

Итоговая структура классов

  • addClass(name) — добавление одного или нескольких классов.
  • removeClass(name) — удаление классов.
  • hasClass(name) — проверка существования класса.
  • toggleClass(name, [force]) — переключение класса.

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

Оглавление