Установка и чтение атрибутов

Создание элементов и установка атрибутов

В SVG.js каждый графический объект создаётся с помощью метода draw.<элемент>(). Например, создание прямоугольника выглядит так:

const draw = SVG().addTo('body').size(500, 500);
const rect = draw.rect(100, 50);

Для задания атрибутов используется метод attr(). Он может применяться как для установки одного атрибута, так и для задания нескольких сразу через объект:

// Установка одного атрибута
rect.attr('fill', 'red');

// Установка нескольких атрибутов одновременно
rect.attr({
    stroke: 'black',
    'stroke-width': 2,
    fill: '#00ff00',
    x: 50,
    y: 50
});

Особенности работы с атрибутами:

  • Атрибуты можно задавать строками, числами и цветами в формате HEX, RGB или именами CSS.
  • Названия атрибутов SVG в методе attr() чувствительны к регистру и должны соответствовать спецификации SVG.

Чтение атрибутов

Чтение атрибутов выполняется тем же методом attr(), но с передачей только имени атрибута:

let fillColor = rect.attr('fill'); // 'red'
let strokeWidth = rect.attr('stroke-width'); // 2

При чтении атрибутов важно учитывать:

  • Если атрибут не был установлен явно, возвращается значение по умолчанию, определённое SVG.
  • Некоторые атрибуты могут возвращать строку вместо числа (например, координаты, размеры).

Управление стилями через атрибуты

SVG.js позволяет работать не только с базовыми атрибутами (fill, stroke, width, height), но и с CSS-свойствами:

rect.attr({
    opacity: 0.5,
    transform: 'rotate(45 50 50)'
});

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

rect.attr('fill', 'blue');
rect.attr('x', 150).attr('y', 100);

Применение цепочек вызовов

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

draw.circle(80)
    .attr({ fill: 'orange', stroke: 'black', 'stroke-width': 3 })
    .move(200, 200);

Метод attr() всегда возвращает объект элемента, что позволяет продолжить цепочку вызовов.

Особенности работы с пользовательскими атрибутами

SVG.js позволяет создавать и использовать пользовательские атрибуты через метод attr():

rect.attr('data-id', '123');
let customId = rect.attr('data-id'); // '123'

Эти атрибуты интегрируются в DOM и могут использоваться для хранения метаданных, управления событиями или взаимодействия с другими библиотеками.

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

Атрибуты могут обновляться динамически в зависимости от состояния элемента:

let width = 100;
let height = 50;

rect.attr({ width: width, height: height });

width = 200;
rect.attr('width', width); // обновление без пересоздания элемента

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

rect.on('mouseover', () => rect.attr('fill', 'green'));
rect.on('mouseout', () => rect.attr('fill', 'red'));

Итоговые рекомендации по работе с атрибутами

  • Использовать объектный синтаксис attr({ ... }) для установки нескольких атрибутов сразу.
  • Применять строковые и числовые значения корректно в соответствии с SVG.
  • Для динамических изменений комбинировать методы attr() с обработчиками событий.
  • Пользовательские атрибуты полезны для хранения данных, не влияя на визуальное отображение.
  • Цепочки методов упрощают создание и настройку элементов, сохраняя код компактным и читаемым.
Оглавление