Deplacer, faire pivoter et redimensionner des elements SVG en Python

Reponse rapide: Pour transformer des elements SVG en Python, chargez le SVG avec SVGDocument, trouvez l’element cible avec des selecteurs ou une recherche par nom de balise, definissez l’attribut transform avec set_attribute() et enregistrez le SVG edite.

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

Dans cet article, vous apprendrez a:

deplacer des elements SVG avec translate();
faire pivoter un element SVG autour d’un point connu;
redimensionner un groupe SVG tout en conservant sa geometrie source;
choisir quand transform est preferable a l’edition de coordonnees ou de path data.

Bases des transformations SVG

Les transformations SVG changent la facon dont un element est rendu sans reecrire sa geometrie d’origine. C’est utile lorsque vous devez deplacer une icone, faire pivoter une forme, redimensionner un groupe, repositionner un dessin genere ou conserver les coordonnees d’origine tout en changeant le resultat visible.

Dans Aspose.SVG for Python via .NET, les transformations sont modifiees comme des valeurs de l’attribut SVG transform. Utilisez Element.set_attribute() pour ecrire une valeur complete comme translate(...), rotate(...), scale(...) ou une liste combinee de transformations.

Fonctions transform courantes:

Valeur `transform`	Exemple	Modele API Aspose.SVG
`translate(tx ty)`	`translate(40 12)`	Ecrire avec `Element.set_attribute()` comme valeur de `transform`
`rotate(angle)`	`rotate(30)`	Definir `transform` sur l’element SVG selectionne
`rotate(angle cx cy)`	`rotate(30 190 68)`	Definir `transform` avec un centre de rotation explicite
`scale(s)`	`scale(1.2)`	Definir `transform` quand x et y sont redimensionnes de la meme facon
`scale(sx sy)`	`scale(1.2 0.8)`	Definir `transform` quand x et y sont redimensionnes separement
Liste `transform`	`translate(20 0) rotate(15)`	Ecrire une liste complete et ordonnee d’operations de transformation

Comment transformer des elements SVG en Python

Utilisez ce flux lorsque la forme doit conserver sa geometrie d’origine mais etre rendue dans une nouvelle position, avec un nouvel angle ou une nouvelle taille:

Chargez le fichier SVG avec SVGDocument.
Trouvez l’element cible ou le groupe par ID, selecteur ou nom de balise.
Choisissez la fonction de transformation, par exemple translate(), rotate(), scale() ou une liste transform combinee.
Definissez l’attribut complet transform avec set_attribute().
Enregistrez le SVG edite et verifiez que l’element est positionne comme prevu.

Cet article utilise le fichier d’exemple transform-svg-elements.svg pour les exemples de code et les illustrations. Vous pouvez l’utiliser comme data/transform-svg-elements.svg lors de l’execution des exemples.

Deplacer un element SVG

Utilisez translate(tx ty) lorsque vous devez deplacer un element sans changer ses x, y, cx, cy ou path data. L’exemple ci-dessous trouve le groupe #badge, le deplace de 25 unites vers la gauche et de 25 unites vers le haut, puis enregistre le SVG edite.

 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)

Le code utilise query_selector() pour trouver le groupe par ID, met a jour son attribut transform et ecrit le resultat avec SVGDocument.save(). Appliquer la transformation a un element <g> deplace toutes les formes du groupe ensemble.

L’illustration ci-dessous compare le SVG source (a) au resultat apres application de translate(-25 -25) au groupe #badge (b).

SVG original et groupe badge deplace apres application d’une transformation translate

Faire pivoter un element SVG autour d’un point

Utilisez rotate(angle cx cy) lorsque l’element doit pivoter autour de son propre centre ou d’un autre point connu. L’exemple fait pivoter le rectangle #diamond autour du centre de sa zone d’origine.

 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)

Le point central dans rotate(45 195 60) fait partie de la valeur transform. Sans ce point, SVG fait pivoter l’element autour de l’origine courante des coordonnees, ce qui donne souvent l’impression que l’element se deplace de facon inattendue.

L’illustration ci-dessous montre le rectangle avant (a) et apres rotation autour du point defini dans rotate(45 195 60) (b).

SVG original et rectangle pivote autour d’un point specifie

Redimensionner un groupe SVG

Utilisez scale() lorsque vous devez changer la taille d’un element ou d’un groupe. Comme le redimensionnement se fait autour de l’origine courante, combinez translate() et scale() lorsque vous voulez que le resultat redimensionne reste dans une position utile.

L’exemple ci-dessous trouve le groupe #arrow et definit une valeur transform complete: translate(250 70) scale(1.5). La translation place la fleche dans le viewport SVG et l’operation de redimensionnement rend la modification facile a voir.

 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)

Cet exemple remplace volontairement la valeur transform precedente sur #arrow. Utilisez cette approche lorsque vous voulez une sortie avec une position et une taille finales connues.

L’illustration ci-dessous compare le SVG source (a) au resultat apres application de translate(250 70) scale(1.5) au groupe #arrow (b).

SVG original et groupe de fleche redimensionne apres application de translate et scale

Erreurs courantes et solutions

Probleme	Cause probable	Solution
L’element pivote et se decale	`rotate(angle)` a ete utilise sans point central	Utilisez `rotate(angle cx cy)` lorsque la rotation doit se faire autour d’un point connu
La mise en page existante change de facon inattendue	Une valeur `transform` precedente a ete remplacee	Remplacez toute la valeur seulement lorsque vous voulez une transformation finale connue
Le redimensionnement deplace l’element	Le redimensionnement se fait par rapport a l’origine courante	Combinez `translate()` et `scale()` volontairement et verifiez l’ordre des transformations
L’element redimensionne apparait hors du viewport	La transformation ne contient pas de translation adaptee	Combinez `translate()` et `scale()` pour garder le resultat visible
Le SVG enregistre est inchange	Le document n’a pas ete enregistre apres edition	Appelez `document.save(output_path)` apres les mises a jour de `transform`
Le resultat visuel differe de la chaine `transform`	Les fonctions de transformation sont appliquees dans l’ordre	Testez l’ordre exact, par exemple `translate(...) scale(...)` contre `scale(...) translate(...)`

FAQ

Comment deplacer un element SVG en Python?

Chargez le SVG avec SVGDocument, trouvez l’element avec query_selector() ou get_elements_by_tag_name(), definissez element.set_attribute("transform", "translate(40 12)"), puis enregistrez le document.

Comment faire pivoter un element SVG autour de son centre?

Definissez une transformation comme rotate(45 195 60), ou 45 est l’angle et 195 60 le centre de rotation. Utilisez un point central pour eviter une rotation accidentelle autour de l’origine SVG.

Comment redimensionner un element SVG en Python?

Definissez l’attribut transform sur scale(1.5) pour un redimensionnement simple, ou utilisez une valeur combinee comme translate(250 70) scale(1.5) lorsque l’element redimensionne doit aussi rester a une position specifique.

Comment combiner translate et scale en SVG?

Definissez une valeur transform qui contient les deux operations, par exemple element.set_attribute("transform", "translate(250 70) scale(1.5)"). L’ordre des operations influence le resultat rendu final.

Dois-je modifier les attributs x et y ou utiliser transform?

Utilisez x, y, cx ou cy pour de simples editions de geometrie sur une forme. Utilisez transform lorsque vous devez deplacer, faire pivoter, redimensionner ou conserver la geometrie d’origine tout en changeant le rendu de l’element.