SVG Transform Origin: поворот вокруг центра изображения

Чтобы повернуть SVG-графику вокруг ее собственного центра через CSS, поместите связанные контуры в одну группу и примените к ней transform-box: fill-box и transform-origin: center. Затем задайте поворот там же. Эти свойства отвечают на разные вопросы: какой прямоугольник служит основой и где внутри него находится центр вращения.

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

Почему один center все еще может сдвигать графику

Для обычного дочернего элемента SVG, например контура или группы, начало преобразования по умолчанию — 0 0. У корневых элементов SVG другое значение по умолчанию. При стандартном transform-box: view-box задание начала как center относится к опорной области просмотра SVG, а не к собственным границам изображения. Справка MDN по transform-origin SVG объясняет значения по умолчанию и эти исключения.

Поэтому пустое пространство вокруг логотипа имеет значение. Небольшой символ возле одного угла большой области рисунка имеет другой центр, чем сама область. transform-box: fill-box переключает основу на ограничивающий прямоугольник объекта. Он не обрезает SVG и не удаляет пустое пространство. Справка по transform-box определяет доступные прямоугольники, включая stroke-box, когда нужна основа с учетом обводки.

Поверните два контура как один знак

Сохраните этот полный пример как rotation.svg и откройте в браузере. Он использует исходный квадрат и отдельный треугольный акцент, оба расположены вдали от начала координат. CSS находится внутри SVG, чтобы самостоятельный файл содержал собственное правило поворота.

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="360" viewBox="0 0 280 210"
  role="img" aria-label="Two-piece artwork rotated around its shared center">
  <style>
    .artwork {
      transform-box: fill-box;
      transform-origin: center;
      transform: rotate(35deg);
    }
  </style>
  <g class="artwork">
    <path fill="#147d78" d="M80 50H160V130H80Z" />
    <path fill="#ed9750" d="M170 70L220 90L170 110Z" />
  </g>
</svg>

До поворота общее изображение занимает x от 80 до 220 и y от 50 до 130. Его прямоугольник имеет ширину 140 единиц и высоту 80, поэтому его центр — (150, 90). Квадрат и акцент сохраняют взаимное положение при повороте группы.

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

Версия со стандартным началом перемещает знак вокруг (0, 0). Две версии с центрированными группами совпадают. В последней панели квадрат поворачивается вокруг (120, 90), а треугольный акцент — вокруг (195, 90). Каждая часть остается возле собственного начального положения, но знак больше не поворачивается как единый объект.

В своем файле выделяйте только части, которые должны двигаться вместе. Фоновые прямоугольники, метки совмещения или удаленные случайные контуры могут увеличить границы группы. Процесс редактирования SVG рассматривает проверку и очистку файла перед добавлением поведения.

Используйте явные координаты, когда центр — дизайнерский выбор

Атрибут преобразования SVG может напрямую задавать угол и центр вращения. В примере замените <g class="artwork"> на <g transform="rotate(35 150 90)">. Оставьте два контура внутри. Удаление класса также останавливает переопределение атрибута преобразованием CSS.

Форма атрибута rotate(angle cx cy) использует градусы, за которыми следуют координаты центра в текущей пользовательской системе координат. CSS rotate(35deg) имеет другой синтаксис и берет начало вращения из отдельного свойства. Если и преобразование CSS, и атрибут преобразования SVG направлены на один элемент, CSS имеет приоритет. См. справку MDN по атрибуту transform.

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

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

Измерьте границы перед вычислением центра

Для простой группы, как в этом примере, расчет центра такой:

cx = x + width / 2
cy = y + height / 2

При нашем браузерном измерении getBBox() группы вернул x: 80, y: 50, width: 140 и height: 80. Собственный поворот не изменил эти локальные значения прямоугольника. Документация getBBox различает эти значения пользовательского пространства и getBoundingClientRect(), чей прямоугольник задан относительно области просмотра браузера.

Для рамок выделения или подогнанного viewBox процесс работы с ограничивающим прямоугольником SVG показывает преобразование между этими системами координат и проверку полей обводки.

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

Центр прямоугольника не всегда визуальный центр

Квадрат в этом примере занимает намного больше площади, чем его треугольный акцент. Середина их общего прямоугольника все равно находится посередине между крайним левым и крайним правым краями. Это геометрическое правило; оно не оценивает, выглядит ли дизайн сбалансированным при повороте.

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

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

Этот процесс поворачивает существующую фигуру без переписывания ее контура. Если цель — превратить один контур в другой, руководство по морфингу SVG рассматривает отдельную проблему согласования геометрии контуров.

Подготовьте исходник перед заданием центра вращения

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

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

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

Частые вопросы

Почему transform-origin: center поворачивает SVG вокруг холста? Для дочернего элемента SVG со стандартной основой view-box center относится к опорной области просмотра SVG. Задайте transform-box как fill-box на поворачиваемом элементе, если нужен ограничивающий прямоугольник его объекта.

Поворачивать группу или каждый контур? Поворачивайте группу, когда части должны двигаться как один знак. Применение fill-box и center к каждому контуру дает каждой части собственный центр вращения, что меняет их общее расположение.

Сделает ли центр fill-box асимметричный логотип сбалансированным? Он выбирает центр ограничивающего прямоугольника объекта. Для визуального баланса может понадобиться другой центр, поэтому проверьте логотип под несколькими углами и при необходимости выберите явные координаты.

Источники

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

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