Импорт готового SVG

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

Использование метода SVG().svg()

Метод svg() позволяет импортировать SVG-код в контейнер SVG.js. Он принимает строку с SVG-разметкой и вставляет её в выбранный контейнер. Пример базового использования:

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

const svgCode = `
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="red" />
</svg>
`;

draw.svg(svgCode);

Ключевые моменты:

  • Метод svg() заменяет содержимое контейнера на предоставленный SVG-код.
  • SVG-код должен быть корректно оформлен, включая xmlns и атрибуты размеров.
  • После вставки отдельных элементов можно обращаться к ним через методы SVG.js (find(), each(), children()).

Импорт через SVG().nested()

Если требуется сохранить структуру оригинального SVG и добавить его как вложенный объект, используется метод nested():

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

const imported = parent.nested().svg(svgCode);

// Доступ к вложенным элементам
imported.find('circle').forEach(c => c.fill('blue'));

Особенности:

  • nested() создаёт отдельный SVG-контейнер внутри текущего.
  • Позволяет работать с импортированным SVG изолированно, не влияя на внешний контейнер.
  • Удобно при необходимости многократного импорта разных SVG-файлов в один проект.

Импорт внешнего файла с использованием fetch

Для загрузки SVG из внешнего файла применяются стандартные веб-методы, например fetch, и метод svg() для вставки:

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

fetch('icon.svg')
  .then(response => response.text())
  .then(data => draw.svg(data))
  .catch(err => console.error('Ошибка загрузки SVG:', err));

Важные моменты:

  • Сервер должен разрешать CORS, если файл загружается с другого домена.
  • Метод svg() принимает только текстовое содержимое SVG, а не URL.
  • После вставки возможно применять любые методы SVG.js к элементам внутри SVG.

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

После импорта готового SVG часто требуется управлять отдельными фигурами: изменять цвет, размеры, позиции или анимацию.

draw.find('circle').forEach(circle => {
  circle.fill('green').stroke({ width: 5, color: '#000' }).radius(50);
});

Особенности:

  • find(selector) принимает CSS-подобные селекторы (circle, .class, #id).
  • each(callback) позволяет обходить каждый элемент с возможностью модификации.
  • Любые изменения автоматически отображаются на странице благодаря реактивной природе SVG.js.

Стили и анимации после импорта

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

draw.find('circle').animate(1000, '<>').move(300, 200).fill('#f06');
  • animate(duration, easing) создаёт плавную анимацию.
  • Методы трансформации (move(), rotate(), scale()) работают на импортированных элементах так же, как на созданных через SVG.js.
  • Можно комбинировать несколько анимаций, создавая сложные интерактивные эффекты.

Сложные SVG с группами и слоями

При импорте SVG, содержащего <g> или сложную иерархию, структура сохраняется:

draw.svg(`
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
  <g id="layer1">
    <rect x="50" y="50" width="100" height="100" fill="yellow"/>
    <circle cx="100" cy="100" r="40" fill="red"/>
  </g>
</svg>
`);

const group = draw.find('#layer1').first();
group.children().forEach(el => el.stroke({ color: '#000', width: 2 }));

Особенности:

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

Практические рекомендации

  • Проверять корректность SVG перед импортом, чтобы избежать ошибок парсинга.
  • Использовать nested() для повторного или многоуровневого импорта.
  • Для динамически создаваемых интерфейсов сочетать fetch и svg() для загрузки и интерактивного управления графикой.
  • Комбинировать с анимацией и трансформациями для создания интерактивных диаграмм, кнопок и графических интерфейсов.

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

Оглавление