So ändern Sie die SVG-Farbe – C#-Beispiele

Mit Aspose.SVG für .NET API können Sie ein SVG-Dokument bearbeiten und Änderungen an seinem Inhalt vornehmen. Die Verwendung von Farbe ist ein wesentlicher Bestandteil der SVG-Erstellung. Sie können SVG-Formen, Linien, Pfade und Text einfärben. Anhand von C#-Beispielen werden wir uns mit Möglichkeiten befassen, Farben in SVG-Dateien anzuwenden. In diesem Artikel zeigen wir, wie Sie mit der Aspose.SVG für .NET-Bibliothek mit SVG-Farben arbeiten und betrachten, wie man die Farbe von SVG-Elementen oder die Hintergrundfarbe in SVG-Dateien ändert.

Wie Sie neue SVG-Elemente hinzufügen und ihre Farbeigenschaften festlegen, haben wir ausführlich in C#-Beispielen im Artikel SVG-Dateien bearbeiten behandelt.

Im Artikel SVG-Farbe wird untersucht, wie SVG-Texte und -Formen eingefärbt werden können. Sie finden einen Überblick darüber, wie Farbe definiert wird, einschließlich der verschiedenen Möglichkeiten, die Transparenz von SVG-Inhalten zu steuern.

SVG-Farbe ändern

Füllen und Streichen sind beides Vorgänge zum Färben von SVG-Elementen. Alle grafischen Elemente wie Formen, Pfade und Text werden durch Füllen gerendert. Die Füllung malt das Innere des Objekts und der Strich malt entlang seiner Umrisse. SVG stroke und SVG fill sind einige der wichtigsten CSS-Eigenschaften, die für alle Linien, Texte und Formen festgelegt werden können. Weitere Informationen zu den Eigenschaften von Stilattributen finden Sie im Artikel Füllungen und Striche in SVG.

Mit der Aspose.SVG-API können Sie die Farbe verschiedener SVG-Elemente in einem SVG-Dokument ändern. Zuerst laden Sie ein vorhandenes SVG-Dokument und können dann die Farbe des erforderlichen SVG-Elements ändern:

1. Verwenden Sie einen der SVGDocument()-Konstruktoren der SVGDocument-Klasse, um ein vorhandenes SVG-Dokument zu laden.

2. Verwenden Sie den QuerySelector(selector), um das gewünschte Element im SVG-Dokument zu finden. Mit der QuerySelector(selector)-Methode der Element-Klasse können Sie das erste Element im Dokument abrufen, das mit dem angegebenen Selektor übereinstimmt. An den resultierenden Elementen können Sie verschiedene Manipulationen vornehmen: ihre Attribute, CSS-Stile usw. ändern.

3. Verwenden Sie die Methode SetAttribute(name, value) der Klasse Element, um die Elementattribute fill oder stroke anzugeben.

Kreisfarbe

Um die Kreisfarbe zu ändern, sollten Sie einige Schritte befolgen:

• Öffnen Sie eine SVG-Quelldatei.
• Stamm-SVG-Element des Dokuments abrufen.
• Holen Sie sich das Kreiselement, um die Farbe zu ändern.
• Legen Sie einen neuen Attributwert fill oder stroke für das Kreiselement fest.
• Speichern Sie das SVG-Dokument.

Der folgende Codeausschnitt zeigt, wie die Kreisfarbe für das erste SVG-Kreiselement in der in Abbildung (a) unten gezeigten Datei basic-shapes.svg geändert wird:

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;
...

    // Prepare a path to a file loading
    string documentPath = Path.Combine(DataDir, "basic-shapes.svg");

    // Load an SVG document from the file
    var document = new SVGDocument(documentPath);
    
    // Get root svg element of the document
    var svgElement = document.RootElement;

    // Get circle element to change color
    var circleElement = svgElement.QuerySelector("circle") as SVGCircleElement;

    // Set a new "fill" attribute value for the circle element
    circleElement.SetAttribute("fill", "green"); 

	// Save the SVG document to a file
    document.Save(Path.Combine(OutputDir, "circle-color.svg"));

Linienfarbe

Um die Linienfarbe zu ändern, sollten Sie ähnliche Schritte ausführen. Das folgende C#-Beispiel zeigt, wie die Linienfarbe für das erste SVG-Linienelement in der Datei basic-shapes.svg geändert wird:

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;
...

    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

	// Prepare a path to a file loading
    string documentPath = Path.Combine(DataDir, "basic-shapes.svg");

    // Load an SVG document from the file
    var document = new SVGDocument(documentPath);

    // Get root svg element of the document
    var svgElement = document.RootElement;

    // Get line element to change color
    var lineElement = svgElement.QuerySelector("line") as SVGLineElement;

    // Set a new "stroke" attribute value for the line element
    lineElement.SetAttribute("stroke", "green");

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "line-color.svg"));

Die folgende Abbildung zeigt das Originalbild (a) und Bilder mit SVG-Farbänderungen für den Kreis (b) und die Linie (c).

Das Attribut fill legt die Farbe des SVG-Kreises fest (Abbildung b). In der resultierenden Datei „circle-color.svg“ ändert sich die Farbe des Kreises von Rot (im Original) zu Grün. Das Attribut stroke legt die Farbe der SVG-Linie fest. In der resultierenden line-color.svg-Datei (Abbildung c) ändert sich die Linienfarbe von Grau zu Grün. Ebenso können Sie die Farbe verschiedener SVG-Grafikelemente wie Formen, Pfade und Text mithilfe des Attributs fill oder stroke ändern.

Hintergrundfarbe ändern

Um die Hintergrundfarbe auf ein SVG-Bild festzulegen, sollten Sie ein neues SVG-Element wie einen Kreis oder ein Rechteck als erstes untergeordnetes Element in einem SVG-Dokument hinzufügen. Denn die Regel für die Reihenfolge der angezeigten SVG-Elemente lautet: Spätere Elemente im Code werden über den vorherigen angezeigt.

Der folgende Codeausschnitt zeigt, wie man ein neues SVG-Rechteck als Hintergrund für ein SVG-Bild erstellt und es einfärbt:

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;
...

    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    string documentPath = Path.Combine(DataDir, "basic-shapes.svg");

    // Load an SVG document from the file
    var document = new SVGDocument(documentPath);

    // Get root svg element of the document
    var svgElement = document.RootElement;

    // Create a rectangle element and set the "fill" attribute value to change background color
    var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 3;
    rectElement.Y.BaseVal.Value = 3;
    rectElement.Width.BaseVal.Value = 400;
    rectElement.Height.BaseVal.Value = 400;
    rectElement.SetAttribute("fill", "Salmon");

    // Add the rectangle element as the first child to svg element
    svgElement.InsertBefore(rectElement, svgElement.FirstChild);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "change-background-color.svg"));

Die Abbildung zeigt die Visualisierung der ursprünglichen SVG-Datei basic-shapes.svg und derselben Datei mit der hinzugefügten Hintergrundfarbe.

Sie können die vollständigen Beispiele und Datendateien von GitHub herunterladen. Informationen zum Herunterladen von GitHub und zum Ausführen von Beispielen finden Sie im Abschnitt So führen Sie die Beispiele aus.

SVG neu einfärben

Lass uns eine Schneeflocke zeichnen! Das folgende C#-Beispiel zeigt, wie man eine SVG-Schneeflocke zeichnet und sie neu einfärbt. Sie können diesen Ansatz für jedes SVG-Bild verwenden: Ändern Sie die Farbe des erforderlichen SVG-Elements und ändern Sie die Hintergrundfarbe:

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;
...

    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    string documentPath = Path.Combine(DataDir, "snowflake-blue.svg");

    // Load an SVG document from the file
    var document = new SVGDocument(documentPath);

    // Get root svg element of the document
    var svgElement = document.RootElement;

    // Create a circle element and set the "fill" attribute value to change background color
    var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
    circleElement.Cx.BaseVal.Value = 150F;
    circleElement.Cy.BaseVal.Value = 100F;
    circleElement.R.BaseVal.Value = 150F;
    circleElement.SetAttribute("fill", "#03b6fd");

    // Add the circle element (background) as the first child to svg element
    svgElement.InsertBefore(circleElement, svgElement.FirstChild);

    // Get the first path element to change color
    var snowflakePath = svgElement.QuerySelector("path") as SVGPathElement;

    // Set a new "stroke" attribute value for the path element
    snowflakePath.SetAttribute("stroke", "white");

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "recolor-svg.svg"));

Die Abbildung zeigt die Visualisierung der ursprünglichen SVG-Datei snowflake-blue.svg und der umgefärbten Datei.

Color Converter ist eine kostenlose Online-Anwendung zum Konvertieren von Farben zwischen Farbformaten. Geben Sie einfach den Farbcode ein und erhalten Sie sofort das Ergebnis! Sie benötigen keine zusätzliche Software. Probieren Sie jetzt unseren leistungsstarken Farbkonverter aus!