Перемещение, поворот и масштабирование SVG-элементов в Python

Краткий ответ: Чтобы трансформировать SVG-элементы в Python, загрузите SVG через SVGDocument, найдите целевой элемент с помощью селекторов или поиска по тегам, задайте атрибут transform через set_attribute() и сохраните отредактированный SVG.

1from aspose.svg import SVGDocument
2
3with SVGDocument("document.svg") as document:
4    element = document.root_element.query_selector("#target")
5    if element is not None:
6        element.set_attribute("transform", "translate(20 10) scale(1.2)")
7    document.save("transformed.svg")

В этой статье вы узнаете, как:

перемещать SVG-элементы с помощью translate();
поворачивать SVG-элемент вокруг известной точки;
масштабировать SVG-группу, сохраняя исходную геометрию;
выбирать, когда transform лучше редактирования координат или данных пути (path data).

Основы SVG-трансформаций

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

В Aspose.SVG for Python via .NET трансформации редактируются как значения SVG-атрибута transform. Используйте Element.set_attribute(), чтобы записать полное значение transform, например translate(...), rotate(...), scale(...) или комбинированный список операций трансформации.

Распространенные функции transform:

Значение `transform`	Пример	Использование Aspose.SVG API
`translate(tx ty)`	`translate(40 12)`	Записать через `Element.set_attribute()` как значение `transform`
`rotate(angle)`	`rotate(30)`	Задать `transform` на выбранном SVG-элементе
`rotate(angle cx cy)`	`rotate(30 190 68)`	Задать `transform` с явным центром поворота
`scale(s)`	`scale(1.2)`	Задать `transform`, когда масштаб по x и y одинаковый
`scale(sx sy)`	`scale(1.2 0.8)`	Задать `transform`, когда масштаб по x и y отличается
Список `transform`	`translate(20 0) rotate(15)`	Записать полный упорядоченный список операций трансформации

Как трансформировать SVG-элементы в Python

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

Загрузите SVG-файл с помощью SVGDocument.
Найдите целевой элемент или группу по ID, селектору или имени тега.
Выберите transform-функцию, например translate(), rotate(), scale() или комбинированный список transform.
Задайте полный атрибут transform через set_attribute().
Сохраните отредактированный SVG и проверьте, что элемент расположен как ожидается.

В статье используется файл transform-svg-elements.svg для примеров кода и иллюстраций. При запуске примеров используйте его как data/transform-svg-elements.svg.

Перемещение SVG-элемента

Используйте translate(tx ty), когда нужно переместить элемент без изменения его x, y, cx, cy или данных пути (path data). Пример ниже находит группу #badge, перемещает ее на 25 единиц влево и на 25 единиц вверх, затем сохраняет отредактированный SVG.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "transform-svg-elements.svg")
 7output_path = os.path.join(output_folder, "badge-moved.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    badge = document.root_element.query_selector("#badge")
12
13    if badge is not None:
14        badge.set_attribute("transform", "translate(-25 -25)")
15
16    document.save(output_path)

Код использует query_selector(), чтобы найти группу по ID, обновляет ее атрибут transform и записывает результат через SVGDocument.save(). Если применить transform к элементу <g>, все фигуры внутри группы переместятся вместе.

Иллюстрация ниже сравнивает исходный SVG (a) с результатом после применения translate(-25 -25) к группе #badge (b).

Исходный SVG и перемещенная группа бейджа после применения translate transform

Поворот SVG-элемента вокруг точки

Используйте rotate(angle cx cy), когда элемент должен вращаться вокруг своего центра или другой известной точки. Пример поворачивает прямоугольник #diamond вокруг центра его исходной области.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "transform-svg-elements.svg")
 7output_path = os.path.join(output_folder, "rectangle-rotated.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    diamond = document.root_element.query_selector("#diamond")
12
13    if diamond is not None:
14        diamond.set_attribute("transform", "rotate(45 195 60)")
15
16    document.save(output_path)

Центральная точка в rotate(45 195 60) является частью transform value. Без этой точки SVG поворачивает элемент вокруг текущего начала координат, из-за чего элемент часто визуально смещается неожиданным образом.

Иллюстрация ниже показывает прямоугольник до (a) и после поворота вокруг точки, заданной в rotate(45 195 60) (b).

Исходный SVG и прямоугольник, повернутый вокруг указанной точки

Масштабирование SVG-группы

Используйте scale(), когда нужно изменить размер элемента или группы. Поскольку масштабирование происходит относительно текущего начала координат, комбинируйте translate() и scale(), если нужно оставить масштабированный результат в удобной позиции.

Пример ниже находит группу #arrow и задает полное значение transform: translate(250 70) scale(1.5). Перенос помещает стрелку внутри области просмотра SVG, а масштаб делает изменение хорошо заметным.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "transform-svg-elements.svg")
 7output_path = os.path.join(output_folder, "arrow-scaled.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    arrow = document.root_element.query_selector("#arrow")
12
13    if arrow is not None:
14        arrow.set_attribute("transform", "translate(250 70) scale(1.5)")
15
16    document.save(output_path)

Этот пример намеренно заменяет предыдущее значение transform у #arrow. Используйте такой подход, когда нужен известный финальный размер и положение.

Иллюстрация ниже сравнивает исходный SVG (a) с результатом после применения translate(250 70) scale(1.5) к группе #arrow (b).

Исходный SVG и масштабированная группа arrow после применения translate и scale transforms

Частые ошибки и исправления

Проблема	Вероятная причина	Исправление
Элемент поворачивается и уезжает	Использован `rotate(angle)` без центра	Используйте `rotate(angle cx cy)`, когда поворот должен происходить вокруг известной точки
Макет неожиданно меняется	Предыдущее значение `transform` было перезаписано	Заменяйте значение целиком только тогда, когда нужен известное итоговое значение `transform`
Масштабирование смещает элемент	Масштабирование происходит относительно текущего начала координат	Осознанно комбинируйте `translate()` и `scale()` и проверяйте порядок операций трансформации
Масштабированный элемент выходит за область просмотра	Transform не содержит подходящего переноса	Комбинируйте `translate()` и `scale()`, чтобы результат оставался видимым
Сохраненный SVG не изменился	Документ не был сохранен после редактирования	Вызовите `document.save(output_path)` после обновления `transform`
Визуальный результат отличается от строки `transform`	Функции `transform` применяются по порядку	Проверяйте точный порядок, например `translate(...) scale(...)` против `scale(...) translate(...)`

FAQ

Как переместить SVG-элемент в Python?

Загрузите SVG с помощью SVGDocument, найдите элемент через query_selector() или get_elements_by_tag_name(), задайте element.set_attribute("transform", "translate(40 12)") и сохраните документ.

Как повернуть SVG-элемент вокруг центра?

Задайте transform вида rotate(45 195 60), где 45 – угол, а 195 60 – центр поворота. Используйте центр, чтобы случайно не повернуть элемент вокруг начала координат SVG.

Как масштабировать SVG-элемент в Python?

Задайте атрибут transform как scale(1.5) для простого масштабирования или используйте комбинированное значение вроде translate(250 70) scale(1.5), когда масштабированный элемент должен остаться в конкретной позиции.

Как объединить translate и scale в SVG?

Задайте одно значение transform, содержащее обе операции, например element.set_attribute("transform", "translate(250 70) scale(1.5)"). Порядок операций влияет на финальный результат рендеринга.

Что лучше менять – x и y или transform?

Используйте x, y, cx или cy для простых правок геометрии одной фигуры. Используйте transform, когда нужно переместить, повернуть, масштабировать или сохранить исходную геометрию, изменив только отображение элемента.

Связанные статьи

Расширенное редактирование SVG в Python собирает практические сценарии для редактирования стилей, геометрии и переиспользуемой графики.
Редактирование стилей SVG в Python объясняет атрибуты оформления, inline-стили, CSS-блоки и приоритет стилей.
Изменение цветов SVG в Python объясняет, как обновлять fill, stroke, inline-стили и цвета градиента.
Редактирование SVG-файла показывает основные DOM-паттерны для добавления и изменения SVG-элементов.
Работа с SVG-атрибутами объясняет, как получать, задавать, проверять, удалять и обновлять SVG-атрибуты.
Навигация по SVG объясняет, как находить SVG-элементы с помощью CSS-селекторов и XPath.

Изменение цветов SVG Стили SVG