Порядок transform в SVG: масштаб и положение графики

Для атрибута SVG transform="translate(60 25) scale(2)" исходная точка сначала масштабируется вдвое, затем смещается на 60 единиц горизонтально и 25 вертикально при переходе в систему координат родителя. Поменяйте порядок на scale(2) translate(60 25), и смещение тоже удвоится. Графика имеет тот же размер, но другое положение.

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

Проследите одну точку вместо угадывания порядка

Возьмем исходную точку (10, 10). При масштабе 2 и смещении (60, 25) два списка дают:

Обе точки получены из одной исходной координаты. Второй список масштабирует смещение вместе с графикой. Его конечное положение отличается от первого на (60, 25).

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

Для арифметики точки двигайтесь от самой правой функции к левой. Для структуры групп читайте от внешней к внутренней. Последовательно придерживайтесь выбранной трактовки во всем вычислении.

Сравните одинаковый знак из двух частей

Сохраните полный пример как transform-order.svg и откройте в браузере. Его графика — оригинальная квадратная рамка с отдельным треугольным акцентом. Отверстие — настоящее пустое пространство, определяемое правилом заливки even-odd.

<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400"
     viewBox="0 0 350 200">
  <g id="art" transform="translate(60 25) scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</svg>

Измените только атрибут группы на transform="scale(2) translate(60 25)". Знак переместится дальше вправо и вниз, а его размер и зазор между частями останутся прежними.

Мы отрендерили оба списка и эквивалент из вложенных групп в браузере. Панели сравнения используют одинаковые координатные области; бледный знак показывает исходную геометрию. Каждая красная точка отмечает, куда попадает исходная точка (10, 10).

Локальные границы исходной графики: x=10, y=10, width=95, height=40. Первая структура дает границы в корневых координатах x=80, y=45, width=190, height=80. Обратный список дает x=140, y=70 при том же размере 190 × 80.

Эти измерения описывают простой тест без обводок. В примере нет анимации и преобразований CSS. Он демонстрирует композицию координат, а не качество конвертации PerfectVector или совместимость со всеми редакторами SVG.

Разделите размещение и размер вложенными группами

Замените исходную группу этой структурой, оставив контуры без изменений:

<g transform="translate(60 25)">
  <g id="art" transform="scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</g>

Это соответствует translate(60 25) scale(2) на одной группе. Внешнее смещение размещает масштабированную систему координат. Изменение внутреннего масштаба оставляет внешние значения смещения (60, 25).

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

Например, пусть исходный угол рамки (10, 10) должен попасть в (120, 80) после масштабирования вдвое. Вычислите:

tx = targetX - scale × anchorX = 120 - 2 × 10 = 100
ty = targetY - scale × anchorY =  80 - 2 × 10 =  60

Используйте translate(100 60) scale(2). Теперь угол переходит в (120, 80). Прямое смещение на (120, 80) поместило бы туда локальное начало координат, а угол оказался бы дальше вправо и вниз.

Расчет предполагает равномерное масштабирование без поворота и перекоса. Для выбранного центра поворота используйте руководство по transform-origin SVG. Размещайте каждое преобразование на группе, отвечающей за эту задачу, вместо объединения несвязанных поправок методом проб и ошибок.

Прочитайте отображаемое преобразование во вложенном файле

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

Для отрендеренного встроенного SVG этот фрагмент переводит точку выбранной группы в пользовательские координаты корневого SVG:

const root = document.querySelector('svg');
const art = document.querySelector('#art');
const rootMatrix = root.getScreenCTM();
const artMatrix = art.getScreenCTM();
if (!rootMatrix || !artMatrix) throw new Error('SVG is not measurable');
 
const toRoot = rootMatrix.inverse().multiply(artMatrix);
const point = new DOMPoint(10, 10).matrixTransform(toRoot);
const result = { x: point.x, y: point.y };

Обратная матрица корня убирает общее преобразование корня в экранные координаты. Это важно: отображение примера 700 × 400 вдвое больше viewBox размером 350 × 200. Здесь экранные пиксели и координаты SVG — разные единицы. MDN описывает преобразование, возвращаемое getScreenCTM().

В нашем браузерном сравнении первый список и вложенная версия дали matrix(2 0 0 2 60 25). Обратный список дал matrix(2 0 0 2 120 50). В этом примере масштаба и смещения последние два числа явно показывают различие смещения.

Фрагмент предполагает обратимые двумерные преобразования. Нулевой масштаб не подходит для проверки с обратной матрицей. Для наложений, экспорта по границам, обводок или повернутых рамок используйте более подробный процесс работы с границами SVG.

Не ожидайте, что getBBox() у группы графики вернет преобразованное положение в корневых координатах. Локальный результат исключает собственное преобразование элемента и преобразования предков, как объясняет справочник getBBox. Локальная рамка может оставаться прежней, когда знак заметно перемещается.

Исправьте преобразование перед восстановлением графики

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

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

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

Если знак существует только в PNG или JPG и нужны редактируемые контуры, векторизатор логотипов PerfectVector поможет подготовить вариант SVG. Проверьте силуэт, отверстие и отдельные фигуры, затем сгруппируйте восстановленную графику и примените преобразования размещения в редакторе или коде.

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

FAQ

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

Почему перестановка translate и scale перемещает логотип? Когда в списке атрибута scale идет перед translate, масштаб умножает и смещение. Когда translate идет перед scale, смещение остается вне этого масштаба. Поэтому одинаковые значения могут дать одинаковые размеры в разных положениях.

Сохранит ли внешнее смещение все точки на месте при изменении размера внутренней группы? Нет. Оно отделяет значения внешнего смещения от внутреннего масштаба. Точки вдали от локального начала координат все равно перемещаются при масштабировании. Выберите опорную точку и рассчитайте смещение для ее размещения.

Sources

1. W3C — SVG transform attribute — Определяет связь между списками преобразований и вложенными системами координат.
2. MDN — SVG transform — Описывает синтаксис преобразований, матричное отображение и приоритет CSS.
3. MDN — getScreenCTM — Описывает матрицу перевода координат SVG в область просмотра документа.
4. MDN — getBBox — Объясняет локальные границы и исключение преобразований измеряемого элемента.

Если исходному логотипу нужна редактируемая геометрия, подготовьте вариант SVG с PerfectVector, проверьте контуры и отдельные части, затем выберите опору и проверьте конечное положение после масштабирования.