Mover, rotar y escalar elementos SVG en Python

Respuesta rápida: Para transformar elementos SVG en Python, cargue el SVG con SVGDocument, encuentre el elemento de destino con selectores o búsqueda por nombre de etiqueta, establezca el atributo transform con set_attribute() y guarde el SVG editado.

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")

En este artículo aprenderá a:

mover elementos SVG con translate();
rotar un elemento SVG alrededor de un punto conocido;
escalar un grupo SVG conservando su geometría de origen;
elegir cuándo transform es mejor que editar coordenadas o path data.

Conceptos básicos de SVG Transform

Las transformaciones SVG cambian cómo se renderiza un elemento sin reescribir su geometría original. Esto es útil cuando necesita mover un icono, rotar una forma, escalar un grupo, recolocar gráficos generados o conservar las coordenadas originales mientras cambia el resultado visible.

En Aspose.SVG for Python via .NET, las transformaciones se editan como valores del atributo SVG transform. Use Element.set_attribute() para escribir un valor completo de transformación, como translate(...), rotate(...), scale(...) o una lista combinada de transformaciones.

Funciones comunes de transform:

Valor `transform`	Ejemplo	Patrón de API Aspose.SVG
`translate(tx ty)`	`translate(40 12)`	Escribir con `Element.set_attribute()` como valor de `transform`
`rotate(angle)`	`rotate(30)`	Establecer `transform` en el elemento SVG seleccionado
`rotate(angle cx cy)`	`rotate(30 190 68)`	Establecer `transform` con un centro de rotación explícito
`scale(s)`	`scale(1.2)`	Establecer `transform` cuando x e y escalan igual
`scale(sx sy)`	`scale(1.2 0.8)`	Establecer `transform` cuando x e y escalan por separado
Lista `transform`	`translate(20 0) rotate(15)`	Escribir una lista completa y ordenada de operaciones de transformación

Cómo transformar elementos SVG en Python

Use este flujo cuando la forma deba conservar su geometría original pero renderizarse en una nueva posición, ángulo o tamaño:

Cargue el archivo SVG con SVGDocument.
Encuentre el elemento o grupo de destino por ID, selector o nombre de etiqueta.
Elija la función de transformación, como translate(), rotate(), scale() o una lista transform combinada.
Establezca el atributo completo transform con set_attribute().
Guarde el SVG editado y verifique que el elemento esté posicionado como se espera.

Este artículo usa el archivo de ejemplo transform-svg-elements.svg para los ejemplos de código y las ilustraciones. Puede usarlo como data/transform-svg-elements.svg al ejecutar los ejemplos.

Mover un elemento SVG

Use translate(tx ty) cuando necesite mover un elemento sin cambiar sus x, y, cx, cy o path data. El ejemplo siguiente encuentra el grupo #badge, lo mueve 25 unidades a la izquierda y 25 unidades hacia arriba, y guarda el SVG editado.

 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)

El código usa query_selector() para encontrar el grupo por ID, actualiza su atributo transform y escribe el resultado con SVGDocument.save(). Al aplicar la transformación a un elemento <g>, todas las formas dentro del grupo se mueven juntas.

La ilustración siguiente compara el SVG de origen (a) con el resultado después de aplicar translate(-25 -25) al grupo #badge (b).

SVG original y grupo badge movido después de aplicar la transformación translate

Rotar un elemento SVG alrededor de un punto

Use rotate(angle cx cy) cuando el elemento deba rotar alrededor de su propio centro u otro punto conocido. El ejemplo rota el rectángulo #diamond alrededor del centro de su área delimitadora original.

 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)

El punto central en rotate(45 195 60) forma parte del valor transform. Sin ese punto, SVG rota el elemento alrededor del origen de coordenadas actual, lo que a menudo hace que el elemento parezca desplazarse de forma inesperada.

La ilustración siguiente muestra el rectángulo antes (a) y después de la rotación alrededor del punto definido en rotate(45 195 60) (b).

SVG original y rectángulo rotado alrededor de un punto especificado

Escalar un grupo SVG

Use scale() cuando necesite cambiar el tamaño de un elemento o grupo. Como el escalado ocurre alrededor del origen actual, combine translate() y scale() cuando quiera que el resultado escalado permanezca en una posición útil.

El ejemplo siguiente encuentra el grupo #arrow y establece un valor completo de transform: translate(250 70) scale(1.5). La traslación coloca la flecha dentro del viewport SVG y la operación de escala hace que el cambio sea fácil de ver.

 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)

Este ejemplo reemplaza intencionalmente el valor transform anterior en #arrow. Use este enfoque cuando quiera que la salida tenga una posición y tamaño finales conocidos.

La ilustración siguiente compara el SVG de origen (a) con el resultado después de aplicar translate(250 70) scale(1.5) al grupo #arrow (b).

SVG original y grupo de flecha escalado después de aplicar translate y scale

Errores comunes y soluciones

Problema	Causa probable	Solución
El elemento rota y se desplaza	Se usó `rotate(angle)` sin punto central	Use `rotate(angle cx cy)` cuando la rotación deba ocurrir alrededor de un punto conocido
El diseño existente cambia inesperadamente	Se sobrescribió un valor `transform` previo	Reemplace el valor completo solo cuando quiera una transformación final conocida
El escalado mueve el elemento	El escalado ocurre respecto al origen actual	Combine `translate()` y `scale()` de forma deliberada y revise el orden de las transformaciones
El elemento escalado aparece fuera del viewport	La transformación no incluye una traslación adecuada	Combine `translate()` y `scale()` para que el resultado escalado permanezca visible
El SVG guardado no cambió	El documento no se guardó después de editar	Llame a `document.save(output_path)` después de actualizar `transform`
El resultado visual difiere de la cadena `transform`	Las funciones de transformación se aplican en orden	Pruebe el orden exacto, por ejemplo `translate(...) scale(...)` frente a `scale(...) translate(...)`

FAQ

¿Cómo muevo un elemento SVG en Python?

Cargue el SVG con SVGDocument, encuentre el elemento con query_selector() o get_elements_by_tag_name(), establezca element.set_attribute("transform", "translate(40 12)") y guarde el documento.

¿Cómo roto un elemento SVG alrededor de su centro?

Establezca una transformación como rotate(45 195 60), donde 45 es el ángulo y 195 60 es el centro de rotación. Use un punto central para evitar rotar accidentalmente alrededor del origen del SVG.

¿Cómo escalo un elemento SVG en Python?

Establezca el atributo transform en scale(1.5) para un escalado simple, o use un valor combinado como translate(250 70) scale(1.5) cuando el elemento escalado también deba permanecer en una posición específica.

¿Cómo combino translate y scale en SVG?

Establezca un valor transform que contenga ambas operaciones, por ejemplo element.set_attribute("transform", "translate(250 70) scale(1.5)"). El orden de las operaciones afecta al resultado renderizado final.

¿Debo cambiar los atributos x e y o usar transform?

Use x, y, cx o cy para ediciones geométricas simples en una forma. Use transform cuando necesite mover, rotar, escalar o conservar la geometría original mientras cambia cómo se representa el elemento.