Импорт SVG файлов

Two.js — мощная библиотека для работы с векторной графикой в браузере, которая поддерживает прямое использование SVG-файлов. Импорт SVG позволяет создавать сложные сцены, используя готовые векторные объекты, а также анимировать их с сохранением всех параметров кривых и форм.

Загрузка SVG-файлов

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

Пример загрузки через URL:

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

Two.load('assets/example.svg', function(svg) {
    two.add(svg);
    two.update();
});

Two.load(url, callback) — асинхронно загружает SVG и возвращает объект Two.Group, который можно добавлять в сцену.
Объект svg содержит все элементы, находящиеся в файле, включая path, polygon, circle, rect и другие.
После добавления в сцену необходимо вызвать two.update(), чтобы отобразить изменения.

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

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

Two.load('assets/example.svg', function(svg) {
    two.add(svg);

    svg.children.forEach(function(child) {
        if (child.type === 'path') {
            child.stroke = '#FF0000';
            child.linewidth = 2;
        }
    });

    two.update();
});

svg.children — массив объектов, входящих в группу SVG.
child.type — тип SVG-элемента (path, circle, polygon, rect и др.).
Стили можно применять как к отдельным элементам, так и к группе целиком.

Преобразования и анимации

Импортированные SVG сохраняют свою структуру, поэтому можно применять к ним трансформации и анимации:

Two.load('assets/example.svg', function(svg) {
    two.add(svg);

    svg.translation.set(two.width / 2, two.height / 2);
    svg.scale = 1.5;
    svg.rotation = Math.PI / 4;

    two.update();
});

translation — перемещение объекта по оси X и Y.
scale — масштабирование.
rotation — вращение объекта в радианах.
Можно использовать Two.Animation или собственные функции requestAnimationFrame для динамических анимаций.

Взаимодействие с SVG-путями

Кривые и линии SVG (<path>) преобразуются в объекты типа Two.Path, что позволяет манипулировать их вершинами:

Two.load('assets/example.svg', function(svg) {
    two.add(svg);

    const path = svg.getById('my-path'); // Получение элемента по id
    path.vertices.forEach(function(v) {
        v.add(new Two.Vector(10, 0)); // Сдвиг всех вершин вправо
    });

    two.update();
});

path.vertices — массив точек, составляющих кривую.
Каждую вершину можно изменять динамически для создания эффектов морфинга или интерактивных деформаций.

Работа с градиентами и заливками

Two.js сохраняет информацию о заливках из SVG. Градиенты и цвета можно редактировать:

Two.load('assets/example.svg', function(svg) {
    two.add(svg);

    svg.children.forEach(function(child) {
        if (child.fill) {
            child.fill = 'linear-gradient(0, #FF0000, #0000FF)';
        }
    });

    two.update();
});

Поддерживаются линейные и радиальные градиенты.
Можно динамически изменять цвета и градиенты для анимации переходов.

Встраивание SVG как строка

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

const svgText = `<svg viewBox="0 0 100 100">
                    <circle cx="50" cy="50" r="40" fill="green"/>
                 </svg>`;

const parser = new DOMParser();
const svgDoc = parser.parseFromString(svgText, "image/svg+xml");
const svgElement = svgDoc.documentElement;

const twoSvg = two.interpret(svgElement);
two.add(twoSvg);
two.update();

two.interpret(svgElement) — конвертирует DOM-элемент SVG в объекты Two.js.
Позволяет работать с SVG, не сохраняя отдельные файлы на сервере.

Ограничения при импорте SVG

Не все сложные фильтры SVG (<filter>, <mask>, <clipPath>) корректно поддерживаются.
Анимации SMIL внутри SVG не конвертируются автоматически.
Для интерактивных или динамических эффектов рекомендуется управлять объектами через Two.js API после импорта.