Если после изменения SVG отдельная деталь уехала в сторону или отразилась, сначала проверьте преобразования её родительских групп. Координаты точки в контуре описывают локальное положение. Видимое положение получается после применения всей цепочки transform, поэтому правильные числа внутри path ещё не гарантируют правильное место на холсте.

Не удаляйте все преобразования в надежде вернуть рисунок. Такой приём может разрушить рабочую геометрию. Лучше взять одну узнаваемую точку, проследить её путь и сравнить сохранённый SVG с исходным редактором.

Выпишите преобразования проблемной детали

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

Запишите цепочку простыми словами: «внутри масштаб два, снаружи перенос на сто вправо». Если преобразование записано как matrix, не заменяйте его случайно подобранным translate. Матрица может одновременно содержать масштаб, наклон, поворот и перенос. Сначала сохраните исходные значения и определите, на каком уровне возникает расхождение.

Проследите одну точку через две вложенные группы

В примере ниже центр круга находится в локальной точке (10, 20). Внутренняя группа увеличивает координаты вдвое: получается (20, 40). Внешняя группа прибавляет 100 к первой координате: итоговый центр — (120, 40). Радиус тоже увеличивается, потому что масштаб действует на всю геометрию круга.

Теперь поменяйте группы местами в отдельной копии: снаружи scale(2), внутри translate(100 0). Сначала точка становится (110, 20), затем — (220, 40). Разница в сто единиц возникает из порядка преобразований, а не из случайного поведения конвертера. Вложенная запись помогает увидеть порядок без догадок о строке из нескольких операций.

xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 100">
  <g transform="translate(100 0)">
    <g transform="scale(2)">
      <circle cx="10" cy="20" r="8" fill="#2769ad"/>
    </g>
  </g>
</svg>

Отделите отражение от переноса

Отрицательный масштаб меняет направление оси. При scale(-1 1) точка с x = 40 получает x = −40. Это отражение относительно вертикальной оси через начало координат, а не автоматическое отражение внутри страницы. Деталь может оказаться слева за пределами видимого холста.

Для иллюстративного отражения внутри ширины 512 можно использовать внешнюю группу translate(512 0) и внутреннюю scale(-1 1). Тогда x = 40 перейдёт в x = 472. Это вычисление относится к геометрии; реальный край с обводкой может выступать дальше. Проверяйте всю нарисованную форму, а не только её опорную точку.

Проверьте центр поворота и способ его записи

Поворот вокруг начала координат и поворот вокруг центра рисунка дают разные траектории. Для атрибута SVG запись rotate(90 256 256) явно задаёт центр. Если оставить только угол, ожидание «повернуть на месте» может не совпасть с результатом.

Также различайте атрибут transform и CSS-преобразование со своим transform-origin. Не переносите CSS-значение с процентами в атрибут механически. Для контрольного экспорта удобнее получить в редакторе явно расположенную векторную геометрию. Применение преобразования к контурам и простое удаление атрибута — разные действия: второе не сохраняет видимое положение.

Найдите первый этап с неправильным положением

Откройте экспортированный SVG отдельно в браузере. Если он уже смещён, исправлять нужно источник или параметры экспорта. Если браузер показывает ожидаемую картинку, сравните неподвижный импорт и только затем анимированный TGS. Движение конвертера может менять положение во времени, поэтому оно мешает диагностировать исходную трансформацию.

Оставьте в копии одну проблемную деталь и необходимые группы. Для сравнения можно добавить простую неподвижную метку в известной точке, но удалите её перед финальным экспортом. Не меняйте одновременно viewBox, координаты контуров и масштаб: иначе исчезновение ошибки не объяснит, какое изменение помогло.

  1. Зафиксируйте исходные координаты и цепочку групп.
  2. Сравните одну изменённую операцию в двух отдельных SVG-копиях.
  3. После исправления верните остальные детали и проверьте их взаимное положение.

Сохраните исправление, которое можно повторить

Если разворачивание преобразований в геометрию решает расхождение, сохраните редактируемый оригинал отдельно. Проверьте после операции кривые, толщину обводки и отверстия. Исправленная координата одной точки не доказывает, что всё оформление осталось прежним.

Для проверки в SVG to TGS нужен вход через Telegram; выбранные SVG отправляются для диагностики. Сначала сравните статичный результат, затем назначайте анимацию и проверяйте края на протяжении цикла. Запишите, какую группу или операцию исправили. Это полезнее множества копий с названиями «последняя» и «точно последняя», когда источник смещения уже забыт.

Источники и документация