SVG-Elemente in Python verschieben, drehen und skalieren

Kurzantwort: Um SVG-Elemente in Python zu transformieren, laden Sie das SVG mit SVGDocument, finden das Zielelement mit Selektoren oder Tag-Namen-Suche, setzen das Attribut transform mit set_attribute() und speichern das bearbeitete 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")

In diesem Artikel lernen Sie, wie Sie:

SVG-Elemente mit translate() verschieben;
ein SVG-Element um einen bekannten Punkt drehen;
eine SVG-Gruppe skalieren und dabei die Quellgeometrie erhalten;
entscheiden, wann transform besser ist als das Bearbeiten von Koordinaten oder path data.

Grundlagen von SVG-Transformationen

SVG-Transformationen ändern, wie ein Element gerendert wird, ohne seine ursprüngliche Geometrie umzuschreiben. Das ist nützlich, wenn Sie ein Icon verschieben, eine Form drehen, eine Gruppe skalieren, generierte Grafik neu positionieren oder die ursprünglichen Koordinaten beibehalten und nur das sichtbare Ergebnis ändern möchten.

In Aspose.SVG for Python via .NET werden Transformationen als Werte des SVG-Attributs transform bearbeitet. Verwenden Sie Element.set_attribute(), um einen vollständigen Transformationswert wie translate(...), rotate(...), scale(...) oder eine kombinierte Transformationsliste zu schreiben.

Häufige Transformationsfunktionen sind:

`transform`-Wert	Beispiel	Aspose.SVG-API-Muster
`translate(tx ty)`	`translate(40 12)`	Mit `Element.set_attribute()` als Wert von `transform` schreiben
`rotate(angle)`	`rotate(30)`	`transform` am ausgewählten SVG-Element setzen
`rotate(angle cx cy)`	`rotate(30 190 68)`	`transform` mit explizitem Drehzentrum setzen
`scale(s)`	`scale(1.2)`	`transform` setzen, wenn x und y gleich skaliert werden
`scale(sx sy)`	`scale(1.2 0.8)`	`transform` setzen, wenn x und y getrennt skaliert werden
`transform`-Liste	`translate(20 0) rotate(15)`	Eine vollständige geordnete Liste von Transformationsoperationen schreiben

So transformieren Sie SVG-Elemente in Python

Verwenden Sie diesen Workflow, wenn die Form ihre ursprüngliche Geometrie behalten, aber an einer neuen Position, in einem neuen Winkel oder in einer neuen Größe gerendert werden soll:

Laden Sie die SVG-Datei mit SVGDocument.
Finden Sie das Zielelement oder die Gruppe über ID, Selektor oder Tag-Namen.
Wählen Sie die Transformationsfunktion, zum Beispiel translate(), rotate(), scale() oder eine kombinierte transform-Liste.
Setzen Sie das vollständige Attribut transform mit set_attribute().
Speichern Sie das bearbeitete SVG und prüfen Sie, ob das Element wie erwartet positioniert ist.

Dieser Artikel verwendet die Beispieldatei transform-svg-elements.svg für Codebeispiele und Abbildungen. Sie können sie beim Ausführen der Beispiele als data/transform-svg-elements.svg verwenden.

SVG-Element verschieben

Verwenden Sie translate(tx ty), wenn Sie ein Element verschieben möchten, ohne dessen x, y, cx, cy oder path data zu ändern. Das folgende Beispiel findet die Gruppe #badge, verschiebt sie 25 Einheiten nach links und 25 Einheiten nach oben und speichert das bearbeitete 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)

Der Code verwendet query_selector(), um die Gruppe über ihre ID zu finden, aktualisiert ihr Attribut transform und schreibt das Ergebnis mit SVGDocument.save(). Wenn die Transformation auf ein <g>-Element angewendet wird, bewegen sich alle Formen innerhalb der Gruppe gemeinsam.

Die Abbildung unten vergleicht das Ausgangs-SVG (a) mit dem Ergebnis nach Anwendung von translate(-25 -25) auf die Gruppe #badge (b).

Ursprüngliches SVG und verschobene Badge-Gruppe nach Anwendung einer translate-Transformation

SVG-Element um einen Punkt drehen

Verwenden Sie rotate(angle cx cy), wenn das Element um seinen eigenen Mittelpunkt oder einen anderen bekannten Punkt gedreht werden soll. Das Beispiel dreht das Rechteck #diamond um den Mittelpunkt seines ursprünglichen Begrenzungsbereichs.

 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)

Der Mittelpunkt in rotate(45 195 60) ist Teil des transform-Werts. Ohne diesen Punkt dreht SVG das Element um den aktuellen Koordinatenursprung, wodurch es häufig unerwartet verschoben wirkt.

Die Abbildung unten zeigt das Rechteck vor (a) und nach der Drehung um den in rotate(45 195 60) definierten Punkt (b).

Ursprüngliches SVG und Rechteck nach Drehung um einen angegebenen Punkt

SVG-Gruppe skalieren

Verwenden Sie scale(), wenn Sie ein Element oder eine Gruppe vergrößern oder verkleinern möchten. Da die Skalierung relativ zum aktuellen Ursprung erfolgt, kombinieren Sie translate() und scale(), wenn das skalierte Ergebnis an einer sinnvollen Position bleiben soll.

Das folgende Beispiel findet die Gruppe #arrow und setzt einen vollständigen transform-Wert: translate(250 70) scale(1.5). Die Verschiebung platziert den Pfeil innerhalb des SVG-Viewports, und die Skalierung macht die Änderung deutlich sichtbar.

 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)

Dieses Beispiel ersetzt absichtlich den bisherigen transform-Wert von #arrow. Verwenden Sie diesen Ansatz, wenn die Ausgabe eine bekannte endgültige Position und Größe haben soll.

Die Abbildung unten vergleicht das Ausgangs-SVG (a) mit dem Ergebnis nach Anwendung von translate(250 70) scale(1.5) auf die Gruppe #arrow (b).

Ursprüngliches SVG und skalierte Pfeilgruppe nach Anwendung von translate und scale

Häufige Fehler und Lösungen

Problem	Wahrscheinliche Ursache	Lösung
Das Element dreht sich und verschiebt sich weg	`rotate(angle)` wurde ohne Mittelpunkt verwendet	Verwenden Sie `rotate(angle cx cy)`, wenn die Drehung um einen bekannten Punkt erfolgen soll
Das vorhandene Layout ändert sich unerwartet	Ein vorheriger `transform`-Wert wurde überschrieben	Ersetzen Sie den ganzen Wert nur, wenn Sie eine bekannte endgültige Transformation wünschen
Skalierung verschiebt das Element	Die Skalierung erfolgt relativ zum aktuellen Ursprung	Kombinieren Sie `translate()` und `scale()` bewusst und prüfen Sie die Reihenfolge der Transformationen
Das skalierte Element erscheint außerhalb des Viewports	Die Transformation enthält keine passende Verschiebung	Kombinieren Sie `translate()` und `scale()`, damit das skalierte Ergebnis sichtbar bleibt
Das gespeicherte SVG ist unverändert	Das Dokument wurde nach der Bearbeitung nicht gespeichert	Rufen Sie nach Transformationsänderungen `document.save(output_path)` auf
Das sichtbare Ergebnis unterscheidet sich vom `transform`-String	Transformationsfunktionen werden der Reihe nach angewendet	Testen Sie die genaue Reihenfolge, zum Beispiel `translate(...) scale(...)` gegenüber `scale(...) translate(...)`

FAQ

Wie verschiebe ich ein SVG-Element in Python?

Laden Sie das SVG mit SVGDocument, finden Sie das Element mit query_selector() oder get_elements_by_tag_name(), setzen Sie element.set_attribute("transform", "translate(40 12)") und speichern Sie das Dokument.

Wie drehe ich ein SVG-Element um seinen Mittelpunkt?

Setzen Sie eine Transformation wie rotate(45 195 60), wobei 45 der Winkel und 195 60 das Drehzentrum ist. Verwenden Sie einen Mittelpunkt, damit das Element nicht versehentlich um den SVG-Ursprung gedreht wird.

Wie skaliere ich ein SVG-Element in Python?

Setzen Sie das Attribut transform für einfache Skalierung auf scale(1.5) oder verwenden Sie einen kombinierten Wert wie translate(250 70) scale(1.5), wenn das skalierte Element an einer bestimmten Position bleiben soll.

Wie kombiniere ich translate und scale in SVG?

Setzen Sie einen transform-Wert, der beide Operationen enthält, zum Beispiel element.set_attribute("transform", "translate(250 70) scale(1.5)"). Die Reihenfolge der Operationen beeinflusst das endgültig gerenderte Ergebnis.

Soll ich x- und y-Attribute ändern oder transform verwenden?

Verwenden Sie x, y, cx oder cy für einfache Geometrieänderungen an einer einzelnen Form. Verwenden Sie transform, wenn Sie verschieben, drehen, skalieren oder die ursprüngliche Geometrie erhalten und nur die Darstellung ändern möchten.