Парсинг SVG разметки

Для работы с SVG в Two.js требуется создать экземпляр библиотеки и связать его с HTML-элементом, обычно с <div> или <canvas>. Основной объект Two.js управляет всеми фигурами и сценой. Инициализация выглядит следующим образом:

const elem = document.getElementById('drawing');
const two = new Two({ width: 800, height: 600 }).appendTo(elem);

Здесь width и height задают размеры холста, а метод appendTo добавляет рендеринг на страницу. После этого можно приступать к парсингу SVG.

Импорт SVG с помощью Two.js

Two.js поддерживает импорт SVG через метод Two.Utils.getSVG. Этот метод получает SVG как строку или URL и преобразует её в объекты Two.js:

Two.Utils.getSVG('icon.svg', function(svg) {
    const shape = two.interpret(svg);
    two.add(shape);
    two.update();
});
  • getSVG — загружает SVG по URL.
  • interpret — превращает DOM-элемент SVG в фигуры Two.js.
  • add — добавляет фигуру на сцену.
  • update — обновляет рендеринг для отображения новых объектов.

Метод interpret автоматически распознаёт элементы <path>, <circle>, <rect>, <polygon> и преобразует их в соответствующие объекты Two.js, такие как Two.Path, Two.Circle, Two.Rectangle и Two.Polygon.

Работа с отдельными элементами SVG

После парсинга SVG каждый элемент становится объектом Two.js. Это позволяет изменять свойства фигуры:

shape.children.forEach(child => {
    child.fill = '#3498db';
    child.stroke = '#2c3e50';
    child.linewidth = 2;
});
two.update();
  • fill — цвет заливки.
  • stroke — цвет контура.
  • linewidth — толщина линии.

При работе с SVG важно учитывать иерархию: элементы могут быть сгруппированы через <g>. В Two.js это соответствует Two.Group, и доступ к дочерним элементам осуществляется через group.children.

Анимация импортированного SVG

Two.js позволяет анимировать любые фигуры, включая импортированные из SVG:

two.bind('upd ate', function(frameCount) {
    shape.rotation += 0.01;
}).play();

Метод bind привязывает функцию к циклу обновления Two.js. Для SVG важно помнить, что rotation, translation и scale применяются к объектам Two.js, а не напрямую к исходному DOM-элементу.

Преобразование сложных путей

SVG часто содержит сложные <path> с кривыми Безье и линиями. Two.js интерпретирует их как Two.Path с массивом вершин (vertices). Каждая вершина имеет координаты x, y и кривизну через controlX, controlY:

const path = shape.children[0]; // допустим, это Two.Path
path.vertices.forEach(v => {
    v.x += 5; // смещаем вершину
    v.y += 5;
});
two.update();

Эта возможность позволяет создавать динамическое изменение формы SVG и применять эффекты морфинга.

Применение стилей и трансформаций

После парсинга можно применять комплексные стили и трансформации:

  • Трансляция: shape.translation.se t(x, y)
  • Масштабирование: shape.scale = 1.5
  • Поворот: shape.rotation = Math.PI / 4
  • Группировка: const group = two.makeGroup(shape1, shape2)

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

Оптимизация больших SVG

При работе с большими SVG-файлами важно учитывать производительность:

  1. Удаление лишних элементов — убрать невидимые или декоративные элементы.
  2. Использование групп — группировать элементы для применения общих трансформаций.
  3. Уменьшение вершин — при необходимости уменьшать количество вершин в кривых Безье.

Прямое создание объектов из строк SVG

SVG можно передавать не только через URL, но и через строку:

const svgString = '<svg><rect x="0" y="0" width="100" height="50" /></svg>';
const domParser = new DOMParser();
const svgDoc = domParser.parseFromString(svgString, 'image/svg+xml');
const shape = two.interpret(svgDoc.documentElement);
two.add(shape);
two.update();

Это удобно для генерации динамических графических элементов без загрузки внешних файлов.

Совмещение с другими объектами Two.js

Импортированный SVG интегрируется в сцену так же, как любые фигуры Two.js, что позволяет:

  • Добавлять анимацию вместе с Two.Circle, Two.Line и другими фигурами.
  • Объединять в группы и применять трансформации.
  • Использовать события, такие как клики или наведение мыши, через собственные обработчики DOM.

Итоговая схема работы с SVG

  1. Создать экземпляр Two.js и прикрепить к DOM.
  2. Загрузить SVG через Two.Utils.getSVG или строку SVG.
  3. Преобразовать SVG в объекты Two.js через interpret.
  4. Добавить фигуры на сцену с помощью add.
  5. Применять стили, трансформации и анимацию.
  6. Оптимизировать сложные SVG для производительности.

Такой подход позволяет легко интегрировать сложные графические элементы SVG в динамические и интерактивные сцены на основе Two.js.

Оглавление