SVG-Stile in Python bearbeiten

Kurzantwort: Um SVG-Stile in Python zu bearbeiten, laden Sie die Datei mit SVGDocument, finden das Zielelement, aktualisieren Präsentationsattribute oder das Attribut style mit Element.set_attribute(), bearbeiten den Text in <style>, wenn das SVG CSS-Regeln verwendet, und speichern das Dokument.

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("style", "fill:#dffbe1;stroke:#006b07;stroke-width:3")
7    document.save("styled.svg")

In diesem Artikel lernen Sie, wie Sie:

SVG-Präsentationsattribute wie fill, stroke und stroke-width setzen;
Werte innerhalb eines inline style-Attributs aktualisieren;
CSS-Regeln bearbeiten, die in einem SVG-<style>-Block gespeichert sind;
Klassennamen umschalten und verstehen, welche Stilschicht Vorrang hat.

SVG-Stiloptionen

SVG-Stile können aus Attributen, Inline-CSS, Stilblöcken, Klassen oder geerbten Gruppenstilen stammen. Prüfen Sie vor dem Bearbeiten einer Datei die Quelle und bestimmen Sie, welche Stilschicht das sichtbare Ergebnis steuert. Dieser Artikel konzentriert sich auf Stilstruktur und Priorität, während SVG-Farben in Python ändern farbspezifische Workflows wie fill, stroke und Gradientenstops behandelt.

Speicherort des Stils	Beispiel	Wann bearbeiten
Präsentationsattribute	`fill="#e3f2fd" stroke="#1565c0"`	Für einfache, explizite Stile an einem Element
Inline-Stil	`style="fill:#fff3e0;stroke:#ef6c00"`	Wenn das Quell-SVG bereits mehrere Deklarationen in `style` speichert
CSS-`<style>`-Block	`<style>.panel { stroke-width: 3; }</style>`	Wenn viele Elemente klassenbasierte Regeln teilen
Klasse oder ID	`class="panel muted"`	Wenn Sie umschalten möchten, welche CSS-Regel angewendet wird
Geerbter Stil	`<g opacity="0.45">...</g>`	Wenn eine Gruppe Kinderelemente steuern soll, die die Eigenschaft nicht überschreiben

Regel zur Stilpriorität: Für dieselbe SVG-Eigenschaft hat inline style am Element meist die höchste Priorität. CSS-Regeln in einem <style>-Block können Präsentationsattribute abhängig von Selektorspezifität und Quellreihenfolge überschreiben. Präsentationsattribute wie fill, stroke oder opacity sind meist die einfachsten Werte auf Elementebene. Geerbte Stile aus Elterngruppen greifen nur, wenn das Kinderelement keinen stärkeren Wert definiert.

So bearbeiten Sie SVG-Stile in Python

Verwenden Sie diesen Workflow, wenn das sichtbare Ergebnis durch SVG-Stile und nicht durch Geometrie gesteuert wird:

Laden Sie die SVG-Datei mit SVGDocument.
Bestimmen Sie die aktive Stilschicht, etwa Präsentationsattribute, inline style, CSS-Regeln, Klassennamen oder geerbte Gruppenstile.
Finden Sie das Zielelement oder den <style>-Block mit query_selector() und einem stabilen Selektor.
Aktualisieren Sie das relevante Stilattribut, die Deklaration, CSS-Regel oder den class-Wert mit set_attribute() oder durch Bearbeiten des <style>-Texts.
Speichern Sie das bearbeitete SVG mit SVGDocument.save() und prüfen Sie, dass stärkere Stilschichten Ihre Änderung nicht überschreiben.

Dieser Artikel verwendet die Beispieldatei work-with-svg-styles.svg für die Codebeispiele. Sie können sie beim Ausführen der Beispiele als data/work-with-svg-styles.svg verwenden. Die Beispieldatei enthält drei sichtbare Karten: eine mit Präsentationsattributen, eine mit inline style und eine mit CSS-Regeln aus einem <style>-Block.

Präsentationsattribute setzen

Präsentationsattribute sind die einfachste Stilschicht zum Bearbeiten. Verwenden Sie sie, wenn ein bestimmtes Element explizite Stile wie fill, stroke, stroke-width, opacity, font-size oder display tragen soll.

Das folgende Beispiel aktualisiert nur den Kreis in #presentation-card. Es findet das Element mit Element.query_selector(), setzt neue stilbezogene Attribute und speichert das bearbeitete SVG als presentation-attributes-updated.svg mit SVGDocument.save().

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "work-with-svg-styles.svg")
 7output_path = os.path.join(output_folder, "presentation-attributes-updated.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    circle = document.root_element.query_selector("#presentation-card circle")
12
13    if circle is not None:
14        circle.set_attribute("fill", "#ffd4f8")
15        circle.set_attribute("stroke", "#1565c0")
16        circle.set_attribute("stroke-width", "3")
17
18    document.save(output_path)

Die Ausgabe behält die ursprüngliche SVG-Struktur bei, aber der Kreis hat nun eigene Attribute fill, stroke und stroke-width. Dieser Ansatz ist in der gespeicherten Datei leicht zu prüfen, weil der Stil direkt am Zielelement steht.

Das Bild unten vergleicht das Ausgangs-SVG (a) mit dem Ergebnis nach dem Ändern der Präsentationsattribute am Kreis (b).

Ursprüngliches SVG und Ergebnis nach dem Setzen von Präsentationsattributen in Python

Inline-Style-Deklarationen aktualisieren

Verwenden Sie diesen Ansatz, wenn das SVG-Element bereits ein Attribut style hat und Sie Werte darin ändern möchten, ohne die Stile in Präsentationsattribute zu verschieben. In der Beispieldatei enthält das Rechteck in #inline-card drei Inline-Deklarationen: fill, stroke und stroke-width.

Das Beispiel liest den vorhandenen style-Wert, ersetzt die bekannten Deklarationen, schreibt den aktualisierten style zurück auf dasselbe Rechteck und speichert inline-style-updated.svg.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "work-with-svg-styles.svg")
 7output_path = os.path.join(output_folder, "inline-style-updated.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    panel = document.root_element.query_selector("#inline-card .panel")
12
13    if panel is not None:
14        style = panel.get_attribute("style")
15        style = style.replace("fill:#fff3e0", "fill:#dffbe1")
16        style = style.replace("stroke:#ef6c00", "stroke:#006b07")
17        panel.set_attribute("style", style)
18
19    document.save(output_path)

Der Code behält das inline style-Attribut bei und ändert nur die Deklarationen, die Farbe und Kontur der Fläche definieren. Das ist nützlich für kontrollierte SVG-Vorlagen, in denen der genaue Stiltext vorhersehbar ist. Für beliebige exportierte SVG-Dateien sollten Sie CSS-Deklarationen vor der Textersetzung parsen oder normalisieren.

Das Bild zeigt, wie sich die Fläche mit Inline-Stil nach dem Aktualisieren der Deklarationen fill, stroke und stroke-width ändert.

Ursprüngliches SVG und Ergebnis nach dem Aktualisieren von Inline-Style-Deklarationen in Python

Einen CSS-Style-Block bearbeiten

Einige SVG-Dateien enthalten ein <style>-Element mit klassenbasierten Regeln. Das ist häufig bei Dateien, die aus Designwerkzeugen exportiert oder aus Vorlagen erzeugt wurden. Aktualisieren Sie in diesem Fall den Stylesheet-Text, statt dasselbe Attribut an jedem Element zu setzen.

Die Beispieldatei verwendet die Regel .panel für das Rechteck in #css-card und die Regel .muted, um die Deckkraft der ganzen Karte zu verringern. Das folgende Beispiel bearbeitet diese zwei sichtbaren CSS-Regeln: Es ändert die gemeinsame Flächenfarbe und macht die CSS-gestylte Karte vollständig deckend.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "work-with-svg-styles.svg")
 7output_path = os.path.join(output_folder, "css-block-updated.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    style_element = document.root_element.query_selector("style")
12
13    if style_element is not None:
14        css_text = style_element.text_content
15        css_text = css_text.replace(
16            ".panel { fill: #ffffff; stroke: #546e7a; stroke-width: 3; }",
17            ".panel { fill: #ede7f6; stroke: #512da8; stroke-width: 5; }"
18        )
19        css_text = css_text.replace(".muted { opacity: 0.45; }", ".muted { opacity: 1; }")
20        style_element.text_content = css_text
21
22    document.save(output_path)

Dieses Muster funktioniert gut für kontrollierte SVG-Vorlagen, in denen der CSS-Text vorhersehbar ist. Der Code aktualisiert gemeinsame Klassenregeln im <style>-Block, sodass jedes Element mit diesen Klassen von einer Stelle aus geändert werden kann. Wenn das Stylesheet minimiert, umgeordnet oder von einem anderen Werkzeug erzeugt wurde, aktualisieren Sie es in Ihrer Anwendung mit einem CSS-Parser, bevor Sie den finalen Text wieder dem <style>-Element zuweisen.

Das Bild vergleicht das Ausgangs-SVG (a) mit der Ausgabe nach dem Bearbeiten von Regeln im CSS-<style>-Block (b).

Ursprüngliches SVG und Ergebnis nach dem Bearbeiten eines CSS-Style-Blocks in Python

Klassenbasierte Stile ändern

Verwenden Sie Klassenänderungen, wenn das Aussehen des SVG bereits durch CSS-Regeln beschrieben ist und das Element nur den Zustand wechseln soll. Sie können zum Beispiel muted entfernen, selected hinzufügen oder eine Klasse durch eine andere ersetzen, ohne den <style>-Block umzuschreiben.

Die Beispieldatei verwendet class="muted" auf #css-card. Das folgende Beispiel entfernt diese Klasse, sodass die Regel .muted die Deckkraft der Karte nicht mehr verringert.

 1import os
 2from aspose.svg import SVGDocument
 3
 4input_folder = "data/"
 5output_folder = "output/"
 6input_path = os.path.join(input_folder, "work-with-svg-styles.svg")
 7output_path = os.path.join(output_folder, "class-updated.svg")
 8os.makedirs(output_folder, exist_ok=True)
 9
10with SVGDocument(input_path) as document:
11    css_card = document.root_element.query_selector("#css-card")
12
13    if css_card is not None:
14        css_card.set_attribute("class", "")
15
16    document.save(output_path)

Die gespeicherte Datei lässt die CSS-Regeln unverändert, aber #css-card passt nicht mehr zu .muted. Verwenden Sie diese Technik, wenn Klassen Zustände wie selected, disabled, muted, highlighted oder hidden darstellen.

Die richtige Stilmethode wählen

Aufgabe	Empfohlene Methode	Warum
Ein Element leicht prüfbar machen	Präsentationsattribute	Der endgültige Wert ist direkt am Element sichtbar
Vorhandene Inline-Deklarationen erhalten	Attribut `style` aktualisieren	Das SVG behält dasselbe Stilformat wie die Quelldatei
Viele Elemente mit einer gemeinsamen Regel ändern	CSS-`<style>`-Block	Eine Regel kann alle passenden Elemente aktualisieren
Einen vordefinierten visuellen Zustand umschalten	`class` ändern	CSS bleibt zentralisiert, und das Element wählt den Zustand
Einen Stil debuggen, der sich nicht ändert	Priorität und Selektoren prüfen	Ein stärkerer Inline-Stil, eine CSS-Regel oder ein geerbter Gruppenwert kann aktiv sein

Verwenden Sie Präsentationsattribute für explizite Ausgabe auf Elementebene. Verwenden Sie Inline-Stile, wenn die bestehende Speicherform des Quell-SVG erhalten bleiben soll. Verwenden Sie CSS-Blöcke, wenn die Datei klassenbasiert ist oder viele Elemente dieselben visuellen Regeln teilen sollen.

Häufige Fehler und Lösungen

Problem	Lösung
Selektor findet nichts	Prüfen Sie Element-ID, Klasse, Namespace und ob das Ziel im Quell-SVG existiert.
Attributänderung hat keine sichtbare Wirkung	Suchen Sie nach einem höher priorisierten inline `style`, einer CSS-Regel oder einem geerbten Gruppenwert.
Aktualisierung von `style` entfernt andere Einstellungen	Lesen Sie zuerst den aktuellen `style`-Wert und behalten Sie Deklarationen bei, die in der Ausgabe bleiben sollen.
CSS-Textersetzung wird nicht angewendet	Der Stylesheet-Text kann andere Abstände oder eine andere Reihenfolge haben. Verwenden Sie vorhersehbare Vorlagen oder parsen Sie CSS vor dem Umschreiben.
Ausgabedatei ist unverändert	Speichern Sie das bearbeitete Dokument mit `document.save(output_path)` und öffnen Sie die Ausgabedatei, nicht die ursprüngliche Eingabe.

FAQ

Wie bearbeite ich SVG-Stile in Python mit Aspose.SVG?

Laden Sie das SVG mit SVGDocument, finden Sie das Zielelement und aktualisieren Sie dann Präsentationsattribute, das inline style-Attribut, CSS-Text innerhalb von <style> oder die Elementklasse class. Speichern Sie das bearbeitete Dokument nach der Änderung.

Soll ich Präsentationsattribute oder inline style verwenden?

Verwenden Sie Präsentationsattribute für einfache Änderungen auf Elementebene, die leicht zu prüfen sein sollen. Verwenden Sie inline style, wenn das Quell-SVG bereits mehrere CSS-Deklarationen in einem style-Attribut speichert und Sie diese Struktur behalten möchten.

Wann sollte ich den SVG-Style-Block bearbeiten?

Bearbeiten Sie den <style>-Block, wenn eine CSS-Regel mehrere Elemente steuert oder wenn das SVG aus einer Vorlage mit Klassen stammt. So kann eine Regel jedes passende Element aktualisieren.

Warum wurde meine SVG-Stiländerung nicht sichtbar?

Eine stärkere Stilquelle kann aktiv sein. Prüfen Sie inline style, passende CSS-Selektoren, geerbte Gruppenstile und den genauen Selektor, mit dem Sie das Element finden.

Kann ich das SVG-Aussehen durch Klassen ändern?

Ja. Wenn das SVG wiederverwendbare CSS-Klassen definiert, aktualisieren Sie das Attribut class des Elements, um visuelle Zustände umzuschalten, ohne das Stylesheet umzuschreiben.