Mit SVG-Pfaden in Python arbeiten

Kurze Antwort: Um mit SVG-Pfaden in Python zu arbeiten, laden Sie die Datei mit SVGDocument, finden ein <path>-Element mit Element.query_selector(), ersetzen sein d-Attribut mit set_attribute() und speichern das bearbeitete SVG.

1from aspose.svg import SVGDocument
2
3with SVGDocument("document.svg") as document:
4    path = document.root_element.query_selector("#wave-path")
5    if path is not None:
6        path.set_attribute("d", "M40 125 C90 65 150 65 200 125 S310 185 370 95")
7    document.save("edited.svg")

In diesem Artikel lernen Sie, wie Sie:

das komplette d-Attribut eines SVG-<path> ersetzen;
path data aus leichteren Formwerten wie Koordinaten, Größen oder Punkten erstellen;
ein kontrolliertes Pfadsegment an eine bekannte Vorlage anhängen;
entscheiden, wann path data bearbeitet werden sollte und wann das Attribut transform besser passt.

SVG path data werden im d-Attribut eines <path>-Elements gespeichert. Es enthält Zeichenbefehle wie M für move, L für line, C für kubische Bézierkurve, Q für quadratische Kurve und Z zum Schließen des Pfads. Wenn Sie diesen Wert bearbeiten, ändern Sie die tatsächliche Geometrie des Pfads, nicht nur seine gerenderte Position.

Bearbeiten Sie path data, wenn sich die Kontur selbst ändern muss. Wenn Sie eine vorhandene Form nur verschieben, drehen oder skalieren müssen, verwenden Sie stattdessen das Attribut transform. Siehe SVG-Elemente in Python verschieben, drehen und skalieren für Transformationsworkflows.

Grundlagen der Pfaddatenbearbeitung

Der sicherste Workflow besteht darin, den gesamten d-Wert durch einen bekannten gültigen Pfadstring zu ersetzen. Das ist nützlich für Icons, generierte Diagramme, einfache Marken und SVG-Vorlagen, in denen der Pfad eine stabile ID besitzt.

Aufgabe	Bearbeiten Sie	Verwenden, wenn
Pfadkontur ändern	`d`-Attribut	Die Formgeometrie muss sich ändern
Dieselbe Kontur verschieben oder skalieren	`transform`-Attribut	Die Form soll ihre ursprünglichen Koordinaten behalten
Pfad aus Formparametern erzeugen	`d`-Attribut aus Koordinaten, Größen oder Punkten	Benutzereingaben sind als Formwerte einfacher als als Pfadbefehle
Pfad umfärben oder neu stylen	`fill`, `stroke`, `style`	Nur das Aussehen ändert sich

SVG path data in Python bearbeiten

Verwenden Sie diesen kurzen Workflow, wenn ein vorhandenes SVG ein <path>-Element enthält und Sie dessen Geometrie ändern müssen:

Laden Sie die SVG-Datei mit SVGDocument.
Finden Sie den Ziel-<path> über ID, Tagname oder einen anderen stabilen Selektor, zum Beispiel mit query_selector().
Bereiten Sie einen gültigen d-Wert vor. Sie können den kompletten Pfadstring schreiben, ihn aus Formparametern wie Koordinaten, Größen oder Punkten erzeugen oder in einer kontrollierten Vorlage ein bekanntes Segment anhängen.
Setzen Sie die neuen Pfaddaten mit set_attribute(), zum Beispiel set_attribute("d", path_data).
Speichern Sie das bearbeitete SVG mit document.save() und öffnen Sie die Ausgabedatei, um die neue Geometrie zu prüfen.

Die Beispiele unten folgen denselben Schritten, verwenden aber unterschiedliche Quellen für den neuen d-Wert.

SVG path data ersetzen

Die Codebeispiele verwenden python-edit-svg-path-data.svg als Eingabedatei. Im ersten Workflow findet der Code #wave-path, ersetzt sein d-Attribut durch eine neue Kurve und speichert das Ergebnis als path-data-replaced.svg.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "python-edit-svg-path-data.svg")
 7output_path = os.path.join(output_folder, "path-data-replaced.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10new_path_data = "M30 140 C85 60 155 80 220 120 S320 180 380 90"
11
12with SVGDocument(input_path) as document:
13    wave_path = document.root_element.query_selector("#wave-path")
14
15    if wave_path is not None:
16        wave_path.set_attribute("d", new_path_data)
17
18    document.save(output_path)

Der Code ändert die Geometrie des Wellenpfads. Er ändert weder stroke noch fill, daher bleibt der visuelle Stil gleich, während sich die Kurvenform ändert. Die Abbildung unten vergleicht das Quell-SVG (a) mit path-data-replaced.svg (b).

Originales SVG und bearbeitetes Ergebnis nach dem Ersetzen von SVG path data

Path data aus Rechteckkoordinaten erstellen

Das d-Attribut von Hand zu schreiben ist unpraktisch, wenn die Eingabe aus einem Formular, einer Datenbank, einem Chart-Layout oder einem anderen Anwendungsteil kommt. Benutzer und Anwendungsdaten beschreiben ein Rechteck normalerweise als x, y, width und height, nicht als SVG-Pfadbefehle.

Das nächste Beispiel behält dieses benutzerfreundliche Eingabemodell bei. Es nimmt Rechteckkoordinaten, wandelt sie in Pfadbefehle um, schreibt diese Befehle in den vorhandenen #marker-path und speichert das Ergebnis als path-data-from-rectangle.svg. Der Quellmarker ist ein Dreieck, aber die neue Geometrie wird absichtlich als Rechteck erzeugt. Das ist nützlich, wenn eine Vorlage ein <path>-Element behalten muss, während Anwendung oder Benutzeroberfläche einfache Rechteckwerte sammeln. Icon-Sets, Masken und wiederverwendbare Vorlagen erwarten oft Pfade, auch wenn die Eingabedaten leichter als Box beschrieben werden können.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "python-edit-svg-path-data.svg")
 7output_path = os.path.join(output_folder, "path-data-from-rectangle.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10rect_x = 60
11rect_y = 20
12rect_width = 80
13rect_height = 60
14
15rect_path_data = (
16    f"M{rect_x} {rect_y} "
17    f"H{rect_x + rect_width} "
18    f"V{rect_y + rect_height} "
19    f"H{rect_x} Z"
20)
21
22with SVGDocument(input_path) as document:
23    marker_path = document.root_element.query_selector("#marker-path")
24
25    if marker_path is not None:
26        marker_path.set_attribute("d", rect_path_data)
27
28    document.save(output_path)

Der Code verlangt vom Benutzer nicht, M-, H-, V- oder Z-Befehle zu schreiben. Er akzeptiert normale Rechteckwerte und erzeugt daraus gültige SVG path data. Das vorhandene <path> behält fill, stroke und andere Attribute; nur die im d-Attribut gespeicherte Geometrie ändert sich.

Die Abbildung unten vergleicht das Quell-SVG (a) mit path-data-from-rectangle.svg (b).

Originales SVG und bearbeitetes Ergebnis nach dem Erstellen von path data aus Rechteckkoordinaten

Pfadsegment in einer kontrollierten Vorlage anhängen

Sie können Befehle an vorhandene path data anhängen, wenn der Eingabepfad eine kontrollierte Vorlage ist und Sie wissen, wo der aktuelle Pfad endet. Das folgende Beispiel liest den aktuellen d-Wert von #wave-path, hängt ein Liniensegment an und speichert path-data-extended.svg.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "python-edit-svg-path-data.svg")
 7output_path = os.path.join(output_folder, "path-data-extended.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    wave_path = document.root_element.query_selector("#wave-path")
12
13    if wave_path is not None:
14        current_path_data = wave_path.get_attribute("d").strip()
15        wave_path.set_attribute("d", current_path_data + " L395 95")
16
17    document.save(output_path)

Verwenden Sie diesen Ansatz nur, wenn der Quellpfad vorhersehbar ist. In beliebigen SVG-Dateien können path data relative Befehle, mehrere Teilpfade, Kurzbefehle oder geschlossene Formen enthalten. In solchen Fällen ist es sicherer, den gesamten d-Wert zu ersetzen oder einen spezialisierten SVG-Pfadparser zu verwenden, statt Befehlstext auf Grundlage von Annahmen zu bearbeiten.

Die Abbildung unten vergleicht das Quell-SVG (a) mit path-data-extended.svg (b). Das hinzugefügte Liniensegment setzt am Ende des ursprünglichen Wellenpfads an. Deshalb sollte diese Technik nur verwendet werden, wenn Endpunkt und Befehlskontext bekannt sind.

Originales SVG und bearbeitetes Ergebnis nach dem Anhängen eines Segments an SVG path data

Häufige Fehler und Lösungen

Problem	Lösung
Der Pfad verschwindet	Prüfen Sie, ob der neue `d`-Wert gültige SVG path data enthält und mit einem move-Befehl wie `M` beginnt
Der Pfad bewegt sich, aber die Form ändert sich nicht	Sie haben `transform` statt `d` bearbeitet; bearbeiten Sie `d`, wenn sich die Geometrie selbst ändern muss
Die Ausgabedatei bleibt unverändert	Speichern Sie das Dokument nach der Bearbeitung und öffnen Sie den Ausgabepfad, nicht das Eingabe-SVG
Angehängte Befehle erzeugen eine seltsame Form	Hängen Sie nur an, wenn Sie den aktuellen Endpunkt und Befehlstyp des Pfads kennen; andernfalls ersetzen Sie den ganzen `d`-Wert
Das Rechteck erscheint an der falschen Stelle	Prüfen Sie `x`, `y`, `width` und `height`, bevor Sie den `d`-String erzeugen
Kurven sehen anders aus als erwartet	Prüfen Sie, ob der Pfad kubische `C`-, quadratische `Q`-, glatte `S`- oder `T`-Befehle oder relative Kleinbuchstabenbefehle verwendet

FAQ

Wie bearbeite ich SVG path data in Python?

Laden Sie das SVG mit SVGDocument, finden Sie das Ziel-<path>-Element und rufen Sie set_attribute("d", new_path_data) auf. Speichern Sie das Dokument nach dem Aktualisieren des d-Attributs.

Was ist das SVG-d-Attribut?

Das d-Attribut speichert Pfadbefehle, die die Geometrie eines <path>-Elements definieren. Befehle wie M, L, C, Q und Z beschreiben Bewegungen, Linien, Kurven und geschlossene Pfade.

Soll ich path data bearbeiten oder transform verwenden?

Bearbeiten Sie d, wenn sich die tatsächliche Kontur ändern muss. Verwenden Sie transform, wenn Sie die vorhandene Kontur nur verschieben, drehen oder skalieren möchten, ohne ihre Koordinaten neu zu schreiben.

Kann ich Befehle an vorhandene SVG path data anhängen?

Ja, aber nur bei kontrollierter Eingabe, bei der Sie den aktuellen Endpunkt und Befehlskontext kennen. Für beliebige SVG-Dateien ersetzen Sie den gesamten d-Wert oder parsen die path data, bevor Sie sie ändern.

Kann ich alle Pfade mit query_selector_all() bearbeiten?

Nein, nicht für den in diesem Artikel gezeigten Workflow mit set_attribute("d", ...). In Aspose.SVG for Python via .NET können Elemente, die von query_selector_all() zurückgegeben werden, Node-Objekte sein, die set_attribute() nicht bereitstellen. Wenn Sie das d-Attribut vieler Pfade aktualisieren möchten, verwenden Sie document.get_elements_by_tag_name("path"), iterieren Sie über die zurückgegebenen Elemente und rufen Sie set_attribute() für jedes Element auf.