SVG-Elemente mit CSS-Selektoren in Python bearbeiten

Kurzantwort: Um SVG-Elemente mit CSS-Selektoren in Python zu bearbeiten, laden Sie die Datei mit SVGDocument, finden ein bearbeitbares Ziel mit Element.query_selector() oder mehrere Knoten mit Element.query_selector_all(), aktualisieren Attribute an einem einzelnen gefundenen Element oder Inhalte auf Knotenebene wie text_content bei mehreren Treffern und speichern das 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("fill", "#2e86de")
7    document.save("edited.svg")

CSS-Selektoren sind nützlich, wenn eine SVG-Datei aussagekräftige IDs, Klassen, Attribute oder verschachtelte Gruppen hat. Die Idee ist einfach: Schreiben Sie einen Selektor, der auf das SVG-Element zeigt, das Sie bearbeiten möchten, aktualisieren Sie dieses Element und speichern Sie das Dokument.

In diesem Artikel lernen Sie, wie Sie:

ein SVG-Element per ID mit query_selector() bearbeiten;
Textinhalt für mehrere gefundene Knoten mit query_selector_all() aktualisieren;
eingeschränkte Attributselektoren verwenden, wenn ein breiter Selektor zu viel erfassen würde;
vermeiden, Element-Attribut-APIs auf Knotenlisten aufzurufen, die von Abfragen mit mehreren Treffern zurückgegeben werden.

Dieser Artikel konzentriert sich auf selektorbasierte Bearbeitungsabläufe. Für umfassendere Dokumentprüfung, Baum-Traversierung und XPath-Beispiele siehe SVG in Python navigieren.

Beispiel-SVG in den Beispielen

Dieser Artikel verwendet die Beispieldatei css-selectors-edit.svg. Sie können sie vor dem Ausführen der Beispiele als data/css-selectors-edit.svg speichern. Das Beispiel-SVG enthält drei kleine bearbeitbare Gruppen: #badge, #status-card und #chart. Die Beispiele unten zeigen, wie Selektoren auf reale SVG-Teile zeigen, bevor der Code sie ändert.

#badge-bg findet einen Kreis über seine ID.
.label findet alle Textbeschriftungen mit derselben Klasse.
#status-card circle[fill] findet den Statuspunkt, und #chart .bar[data-level='high'] findet den hohen Diagrammbalken.

So bearbeiten Sie SVG-Elemente mit CSS-Selektoren in Python

Verwenden Sie diesen Workflow, wenn eine SVG-Datei stabile IDs, Klassen, Attribute oder verschachtelte Gruppen hat:

Laden Sie die SVG-Datei mit SVGDocument.
Wählen Sie den engsten Selektor, der das Ziel identifiziert, etwa #id, .class, tag[attribute] oder einen eingeschränkten Selektor innerhalb einer Gruppe.
Verwenden Sie query_selector() für ein bearbeitbares Element, wenn Sie set_attribute() benötigen.
Verwenden Sie query_selector_all() nur für sichere Änderungen auf Knotenebene über viele Treffer hinweg, etwa text_content.
Speichern Sie das bearbeitete SVG und prüfen Sie, dass der Selektor keine fremden Elemente betroffen hat.

Ein SVG-Element per ID bearbeiten

Ein ID-Selektor ist die einfachste und sicherste Option, wenn das Zielelement eindeutig ist. Das folgende Beispiel findet den Kreis mit id="badge-bg", ändert fill, stroke und stroke-width und speichert das bearbeitete SVG als css-selector-edit-by-id.svg. Verwenden Sie dieses Muster für SVG-Vorlagen, in denen wichtige Objekte stabile IDs haben.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "css-selectors-edit.svg")
 7output_path = os.path.join(output_folder, "css-selector-edit-by-id.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    badge_background = document.root_element.query_selector("#badge-bg")
12
13    if badge_background is not None:
14        badge_background.set_attribute("fill", "#2e86de")
15        badge_background.set_attribute("stroke", "#0d47a1")
16        badge_background.set_attribute("stroke-width", "5")
17
18    document.save(output_path)

Das Bild unten vergleicht das Ausgangs-SVG (a) mit css-selector-edit-by-id.svg (b). Nur der mit #badge-bg ausgewählte Kreis ändert Farbe und Kontur; Statuskarte, Diagramm und Beschriftungen bleiben unverändert.

Ursprüngliches SVG und bearbeitetes Ergebnis nach dem Ändern des Badge-Kreises per ID

Mehrere SVG-Textknoten nach Klasse bearbeiten

Verwenden Sie query_selector_all(), wenn dieselbe Änderung auf Knotenebene auf alle Treffer angewendet werden soll. Das Beispiel-SVG verwendet class="label" für alle Textbeschriftungen. Das folgende Beispiel findet alle Beschriftungen und aktualisiert ihren Textinhalt.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "css-selectors-edit.svg")
 7output_path = os.path.join(output_folder, "css-selector-edit-labels.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    labels = document.root_element.query_selector_all(".label")
12
13    for label in labels:
14        label.text_content = label.text_content.upper()
15
16    document.save(output_path)

Die Ausgabe ändert den Text jedes SVG-Textknotens mit der Klasse label. Dies ist das wichtigste Beispiel für mehrere Knoten im Artikel: Es verwendet query_selector_all() für den Selektorablauf und vermeidet Element.set_attribute() auf NodeList-Elementen.

Das Bild unten vergleicht das Ausgangs-SVG (a) mit dem als css-selector-edit-labels.svg gespeicherten Ergebnis (b). Alle Beschriftungen werden in Großbuchstaben umgewandelt, während Formen, fill, stroke und Diagrammbalken gleich bleiben. Dadurch bleibt der visuelle Fokus auf der klassenbasierten Textänderung.

Ursprüngliches SVG und bearbeitetes Ergebnis nach dem Ändern von SVG-Textknoten per Klasse

Eingeschränkte Attributselektoren verwenden

Eingeschränkte Attributselektoren sind nützlich, wenn ein breiter Selektor zu viele Elemente erfassen würde. Das folgende Beispiel bearbeitet zwei verschiedene Ziele in einem Ablauf: den Statuspunkt, ausgewählt durch #status-card circle[fill], und den hohen Diagrammbalken, ausgewählt durch #chart .bar[data-level='high'].

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "css-selectors-edit.svg")
 7output_path = os.path.join(output_folder, "css-selector-edit-scoped-attributes.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    warning_dot = document.root_element.query_selector("#status-card circle[fill]")
12    high_bar = document.root_element.query_selector("#chart .bar[data-level='high']")
13
14    if warning_dot is not None:
15        warning_dot.set_attribute("fill", "#d32f2f")
16        warning_dot.set_attribute("stroke", "#8b0000")
17        warning_dot.set_attribute("stroke-width", "4")
18
19    if high_bar is not None:
20        high_bar.set_attribute("fill", "#455a64")
21        high_bar.set_attribute("opacity", "1")
22
23    document.save(output_path)

Der erste Selektor findet einen Kreis nur innerhalb von #status-card und nur dann, wenn dieser Kreis ein Attribut fill hat. Der zweite Selektor findet den Diagrammbalken, dessen data-level den Wert high hat. Die Ausgabe sollte einen roten Statuspunkt und einen dunklen hohen Balken zeigen.

Das Bild unten vergleicht das Ausgangs-SVG (a) mit css-selector-edit-scoped-attributes.svg (b). Die eingeschränkten Selektoren aktualisieren zwei getrennte Ziele, ohne den Badge oder die unteren Diagrammbalken zu ändern. Das ist der Hauptvorteil der Kombination aus Gruppe, Klasse, Tag und Attributbedingungen.

Ursprüngliches SVG und bearbeitetes Ergebnis nach dem Ändern des Statuspunkts und des hohen Diagrammbalkens

Häufige Fehler und Lösungen

Für Attributaktualisierungen bevorzugen Sie query_selector() mit einem Selektor, der auf ein bearbeitbares Element zeigt. Für wiederholten Text oder Änderungen auf Knotenebene verwenden Sie query_selector_all() und verarbeiten jeden zurückgegebenen Knoten. Halten Sie Selektoren stabil: IDs sind am besten für eindeutige Vorlagenteile, Klassen sind nützlich für wiederholte Beschriftungen, und eingeschränkte Selektoren helfen, ähnliche Elemente in anderen Gruppen nicht zu ändern.

Problem	Lösung
Nur ein Ziel ändert sich	`query_selector()` gibt nur den ersten Treffer zurück. Verwenden Sie `query_selector_all()` für Änderungen an mehreren Knoten, etwa zum Ändern von `text_content`; verwenden Sie `query_selector()`, wenn der Code `set_attribute()` aufrufen muss.
`set_attribute()` schlägt in einer `query_selector_all()`-Schleife fehl	NodeList-Elemente stellen möglicherweise kein `Element.set_attribute()` bereit. Verwenden Sie Änderungen auf Knotenebene wie `text_content` oder `query_selector()`, wenn Sie Attribute setzen müssen.
Selektor gibt nichts zurück	Prüfen Sie die SVG-Quelle und die tatsächlichen ID-, Klassen-, Tag-Namen- und Attributwerte.
Attributselektor passt nicht	Beginnen Sie mit einem Selektor auf Attributvorhandensein wie `circle[fill]` und fügen Sie Wertfilter erst hinzu, wenn der einfache Selektor funktioniert.
Ein breiter Klassenselektor ändert zu viel	Fügen Sie Kontext hinzu, zum Beispiel `#chart .bar[data-level='high']`, um die Änderung auf eine Gruppe zu begrenzen.
Ausgabedatei ist unverändert	Speichern Sie das bearbeitete Dokument und öffnen Sie den Ausgabepfad, nicht die ursprüngliche Eingabedatei.

FAQ

Kann ich CSS-Selektoren verwenden, um SVG in Python zu bearbeiten?

Ja. Laden Sie das SVG mit SVGDocument, finden Sie ein bearbeitbares Ziel mit query_selector() und aktualisieren Sie es mit set_attribute(). Verwenden Sie query_selector_all(), wenn Sie alle passenden Knoten mit einer Änderung auf Knotenebene verarbeiten müssen, etwa durch Ändern von text_content.

Was ist der Unterschied zwischen query_selector() und query_selector_all()?

query_selector() gibt das erste passende Element zurück und ist die richtige Wahl, wenn der Code set_attribute() aufrufen muss. query_selector_all() gibt eine NodeList aller Treffer zurück und ist nützlich für Änderungen auf Knotenebene, etwa text_content an jedem gefundenen Textknoten.

Kann ich SVG-Elemente nach Klasse auswählen?

Ja. Verwenden Sie einen Klassenselektor wie .label. Für mehrere Textknoten kann query_selector_all(".label") den text_content jedes Treffers aktualisieren. Zum Setzen von Attributen verwenden Sie einen eingeschränkten Selektor mit query_selector().

Kann ich SVG-Elemente nach Attributen auswählen?

Ja. Attributselektoren wie circle[fill] oder .bar[data-level='high'] können SVG-Elemente nach vorhandenen Attributen finden. Begrenzen Sie sie mit einer Gruppen-ID, wenn dasselbe Muster an mehreren Stellen vorkommt.

Soll ich CSS-Selektoren oder XPath für die SVG-Bearbeitung verwenden?

Verwenden Sie CSS-Selektoren für IDs, Klassen, Attribute und einfache gruppenbezogene Änderungen. Verwenden Sie XPath, wenn die Abfrage von einer komplexeren Dokumentstruktur oder Beziehungen zwischen Knoten abhängt.