Методы манипуляции DOM

Библиотека SVG.js предоставляет гибкие методы для динамического создания и вставки элементов SVG в документ. Основной способ создания элемента — метод draw.*(), где draw — контейнер SVG, а * — тип создаваемого элемента: rect(), circle(), line(), text() и т.д.

Пример создания прямоугольника:

const draw = SVG().addTo('body').size(400, 400);

const rect = draw.rect(100, 50).fill('#f06');

Метод add() позволяет вставить существующий элемент в другой контейнер:

const group = draw.group();
group.add(rect);

При использовании nested() создаётся вложенный SVG-контейнер:

const nestedSvg = draw.nested(200, 200).move(50, 50);
nestedSvg.circle(100).fill('blue');

Работа с атрибутами элементов

Методы attr() и size() обеспечивают управление свойствами элементов:

rect.attr({ x: 10, y: 20, rx: 5, ry: 5 }); // установка нескольких атрибутов
rect.size(120, 60); // изменение ширины и высоты

Метод cx() и cy() управляют координатами центра, а move() устанавливает позицию левого верхнего угла:

rect.cx(200).cy(150);
rect.move(50, 50);

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

const currentX = rect.x();
const currentWidth = rect.width();

Группировка и иерархия элементов

Группы (group()) позволяют объединять несколько элементов для совместных трансформаций и управления стилями:

const group = draw.group();
const circle1 = draw.circle(50).fill('red');
const circle2 = draw.circle(50).fill('green').move(60, 0);

group.add(circle1).add(circle2);
group.move(100, 100).rotate(45);

Группы можно вкладывать друг в друга, создавая сложные иерархии. Методы add(), children() и each() позволяют управлять элементами внутри группы:

group.each(element => element.opacity(0.5));

Управление порядком элементов

Порядок элементов в DOM определяет их отображение. SVG.js предоставляет методы front(), back(), before(), after():

rect.front(); // перемещает элемент поверх всех
rect.back();  // помещает элемент под все остальные
circle1.before(rect); // вставка перед указанным элементом
circle2.after(rect);  // вставка после указанного элемента

Метод index() позволяет получить или изменить позицию элемента внутри родителя:

const idx = rect.index();  // получение индекса
rect.index(0);             // установка нового индекса

Клонирование и удаление элементов

Метод clone() создаёт точную копию элемента, включая все атрибуты и стили:

const rectClone = rect.clone().move(200, 50);

Метод remove() полностью удаляет элемент из DOM:

rect.remove();

Метод clear() очищает контейнер, удаляя все дочерние элементы:

group.clear();

Работа с HTML и SVG DOM напрямую

SVG.js интегрируется с нативным DOM. Метод node возвращает DOM-узел элемента:

const svgNode = rect.node;
svgNode.addEventListener('click', () => console.log('Rect clicked'));

Методы appendTo(), prependTo(), append(), prepend() управляют добавлением элементов в любой DOM-контейнер:

const newRect = SVG().rect(50, 50).fill('orange');
newRect.appendTo(document.body);

Трансформации и позиционирование

Манипуляции DOM тесно связаны с трансформациями. Основные методы:

  • move(x, y) – установка позиции;
  • center(cx, cy) – установка центра;
  • rotate(angle, cx, cy) – вращение;
  • scale(sx, sy, cx, cy) – масштабирование;
  • skew(xAngle, yAngle) – наклон.
rect.rotate(30, 100, 50).scale(1.5, 1.5);

Метод transform() позволяет комбинировать все виды трансформаций в одном объекте:

rect.transform({ translateX: 50, translateY: 20, rotate: 45, scaleX: 2 });

Итерации и поиск элементов

Для поиска элементов в дереве SVG используются методы find() и findOne(), которые принимают CSS-подобный селектор:

const allRects = draw.find('rect');
const firstRed = draw.findOne('rect[fill="#f06"]');

Метод each() позволяет перебрать найденные элементы и выполнить операции над каждым:

draw.find('circle').each(c => c.fill('purple'));

Методы parent(), children() и first()/last() облегчают навигацию по иерархии элементов:

const parentGroup = circle1.parent();
const children = group.children();

Анимации через манипуляцию DOM

Манипулирование DOM напрямую расширяет возможности анимации. Метод animate() используется для плавного изменения атрибутов и трансформаций:

rect.animate(1000).move(300, 100).fill('green');

Метод during() позволяет выполнять действия на каждом кадре анимации:

rect.animate(2000).during((pos, morph, eased) => {
  rect.opacity(eased);
});

Метод loop() обеспечивает циклическую анимацию:

rect.animate(1000, '<>').loop();

События и взаимодействие

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

rect.on('mouseenter', () => rect.fill('blue'));
rect.on('mouseleave', () => rect.fill('#f06'));
rect.off('mouseenter'); // отключение события

Метод click(), mouseover(), mouseout() предоставляют короткую запись для привязки событий.

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

Оглавление