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

В SVG.js любой элемент создаётся через объект SVG(), который возвращает корневой SVG-контейнер, или через методы создания фигур на этом контейнере, такие как rect(), circle(), line(), path().

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

const draw = SVG().addTo('body').size(600, 400);
const rect = draw.rect(200, 100).fill('#f06').move(50, 50);

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

Выбор элементов возможен как через переменные, так и с помощью селекторов:

const sameRect = draw.findOne('rect'); // выбирает первый <rect>
const allRects = draw.find('rect');    // выбирает все <rect>

Метод findOne() возвращает объект элемента, метод find() — коллекцию элементов типа SVG.Collection.

Чтение атрибутов и стилей

Все атрибуты SVG-элементов доступны через методы attr() и style().

Примеры:

const width = rect.attr('width');  // возвращает 200
const fillColor = rect.style('fill');  // возвращает '#f06'

Для установки атрибутов можно передавать объект:

rect.attr({ x: 100, y: 150, width: 300 });
rect.style({ stroke: '#000', 'stroke-width': 2 });

Методы attr() и style() позволяют работать как с отдельными свойствами, так и с набором атрибутов одновременно.

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

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

  • bbox() — возвращает bounding box, объект с координатами и размерами: { x, y, width, height }.
  • rbox() — возвращает координаты относительно родительского элемента или документа.
  • cx(), cy(), width(), height() — прямой доступ к координатам центра и размерам.

Пример:

const box = rect.bbox();
console.log(box.x, box.y, box.width, box.height);

bbox() полезен для вычислений, позиционирования и выравнивания элементов в SVG.

Работа с классами и идентификаторами

Каждый элемент SVG может иметь id и CSS-классы. Библиотека позволяет легко их читать и изменять:

rect.id('myRect');
rect.addClass('highlighted');
rect.hasClass('highlighted'); // true
rect.removeClass('highlighted');

id() и методы классов возвращают строки или изменяют их, что удобно при динамическом управлении SVG.

Чтение и управление текстом

Для текстовых элементов (text) можно получать и изменять содержимое:

const text = draw.text('Привет').move(100, 200);
console.log(text.text());  // "Привет"
text.text('Новый текст');

Методы text() и plain() различаются: text() может работать с HTML-подобной разметкой внутри SVG, а plain() возвращает или задаёт только простой текст без вложенных элементов.

Инспектирование трансформаций

Элементы SVG могут быть повернуты, масштабированы или перемещены. Для этого используются методы:

  • transform() — получение или установка трансформаций.
  • translate(x, y) — смещение.
  • rotate(angle, cx, cy) — поворот вокруг точки.
  • scale(sx, sy) — масштабирование.

Пример:

rect.translate(50, 50).rotate(45);
const t = rect.transform();
console.log(t); // { rotation: 45, scaleX: 1, scaleY: 1, x: 50, y: 50 }

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

Коллекции элементов

Методы find() и children() возвращают коллекции, позволяющие работать с множеством элементов одновременно:

const circles = draw.find('circle');
circles.each(function(i, children) {
    console.log(this.attr('cx'), this.attr('cy'));
});

Коллекция поддерживает методы filter(), map(), forEach() для удобной фильтрации, модификации и итерации по SVG-элементам.

События для инспекции

SVG.js поддерживает стандартные DOM-события:

rect.on('click', function(event) {
    console.log('Нажат прямоугольник', this.bbox());
});

Методы .on() и .off() позволяют отслеживать действия пользователя, а также инспектировать атрибуты элемента в момент события.

Дополнительные утилиты для анализа

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

  • inside(x, y) — проверяет, находится ли точка внутри элемента.
  • intersects(element) — проверяет пересечение с другим элементом.
  • point(x, y) — создаёт объект точки для вычислений координат.

Пример использования:

if(rect.inside(120, 80)) {
    console.log('Точка внутри прямоугольника');
}

Эти методы полезны для создания интерактивных визуализаций и анализа геометрии SVG.

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

Оглавление