Как можно восстановить иерархию групп SVG, если библиотека её «плоско» разворачивает?

Question

Если библиотека «сплющивает» SVG, иерархию можно восстановить на этапе парсинга. Для этого используют исходный SVG DOM или метаданные элементов. Группы собираются вручную на основе id, data-* атрибутов или вложенности. Далее эта структура маппится на объекты Canvas.

YeaHub · Accepted Answer

Многие Canvas-библиотеки упрощают SVG-структуру, так как им не нужна полная DOM-иерархия. Однако в сложных редакторах иерархия групп часто критична.Основная идея восстановленияВосстановление строится не на Canvas, а на данных:SVG содержит полную структуруCanvas — только результат отрисовкиПоэтому сначала нужно сохранить или восстановить структуру, а уже потом работать с Canvas-объектами.Практические подходыПарсинг SVG до передачи в библиотекуИспользуется DOMParserПроход по <g> и дочерним элементамФормирование собственного дереваИспользование метаданныхiddata-groupкастомные атрибутыМаппинг на Canvas-объектыКаждому Canvas-объекту присваивается ссылка на узел структурыГруппы собираются вручную через GroupПример логики (упрощённо)// svgNode -> список дочерних элементов
// далее создаём fabric.Group на основе этих связей
Ограничения подходаТребуется дополнительная памятьСложнее синхронизировать измененияБиблиотека может не поддерживать вложенные группы напрямуюКраткий выводИерархия SVG восстанавливается не средствами Canvas, а через предварительный анализ SVG-структуры. Это требует собственной модели данных, но даёт полный контроль над группами и слоями.