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

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

Подключение и подготовка

Для начала необходимо подключить библиотеку SVG.js:

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.1/dist/svg.min.js"></script>

Создание контейнера SVG в HTML:

<div id="drawing"></div>

Инициализация SVG-контейнера в Jav * aScript:

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

Импорт SVG из строки

SVG.js позволяет импортировать строку с SVG-разметкой с помощью метода SVG() и функции SVG().svg():

const svgString = `
<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="red" />
</svg>
`;

const imported = draw.svg(svgString);

Метод svg() вставляет SVG-разметку внутрь контейнера и автоматически превращает элементы в объекты, с которыми можно работать через API SVG.js. После этого можно получать доступ к отдельным элементам:

const circle = draw.find('circle')[0]; // получение первого круга
circle.fill('blue'); // изменение цвета заливки

Импорт SVG из DOM-элемента

Если SVG уже присутствует в HTML, его можно обернуть в объект SVG.js через SVG(adomElement):

<svg id="mySvg" width="300" height="300">
  <rect x="50" y="50" width="200" height="200" fill="green"></rect>
</svg>
const svgElement = document.getElementById('mySvg');
const importedSvg = SVG(svgElement);
const rect = importedSvg.findOne('rect');
rect.fill('orange'); // изменение заливки

Использование find() возвращает массив элементов, соответствующих CSS-селектору, а findOne() — первый найденный элемент.

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

После парсинга можно обращаться к атрибутам элементов через методы attr(), cx(), cy(), r() и другие:

const circle = draw.findOne('circle');
console.log(circle.cx(), circle.cy(), circle.r()); // вывод текущих координат и радиуса

circle.attr({
  stroke: 'black',
  'stroke-width': 5
});
circle.radius(50); // изменение радиуса через метод SVG.js

Модификация структуры SVG

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

const group = draw.group();
const rect = draw.rect(100, 50).fill('purple');
const circle = draw.circle(40).fill('yellow');

group.add(rect).add(circle); // объединение элементов в группу
group.move(50, 50); // смещение всей группы

Удаление элементов выполняется методом remove():

circle.remove(); // удаление круга

Преобразование и экспорт обратно в строку

После модификации SVG можно получить обновленную разметку в виде строки:

const updatedSvg = draw.svg(); // возвращает текущий SVG как строку
console.log(updatedSvg);

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

Встроенные фильтры и анимации

При парсинге и дальнейшем управлении SVG-элементами можно применять фильтры, трансформации и анимации:

circle.animate(1000).fill('red').move(200, 200); // анимация цвета и позиции

SVG.js также поддерживает работу с трансформациями:

rect.rotate(45, 100, 100); // вращение относительно точки (100,100)
rect.scale(1.5, 1.5); // масштабирование по обеим осям

Ограничения и особенности

  • Парсинг строк с некорректной SVG-разметкой может вызвать ошибки или игнорирование элементов.
  • При использовании метода svg() события, привязанные к исходным DOM-элементам, теряются. Для их сохранения необходимо заново регистрировать обработчики.
  • Некоторые CSS-свойства могут быть проигнорированы, если они не встроены как атрибуты SVG.

Практические приёмы

  1. Для быстрого клонирования SVG-элементов удобно использовать clone():
const circleClone = circle.clone().move(150, 0);
  1. Для работы с множеством элементов одновременно применяют метод each():
draw.find('circle').each(function(i, children) {
  this.fill(`rgb(${i * 50},100,150)`);
});

  1. Использование групп (group) упрощает масштабирование, перемещение и трансформацию нескольких элементов одновременно.

  2. Поддержка импорта из внешних файлов через AJAX позволяет загружать сложные SVG-документы и парсить их для динамического редактирования.

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

Оглавление