SVG mit CSS-Selektoren in C# bearbeiten

CSS-Selektoren sind eine praktische Möglichkeit, bestimmte SVG-Elemente vor dem Bearbeiten gezielt anzusprechen. Mit Aspose.SVG for .NET kann C#-Code QuerySelector() und QuerySelectorAll() verwenden, um Elemente nach Tag-Namen, Hierarchie, Attributen oder Position im SVG-Baum zu finden und anschließend Attribute zu ändern, Knoten zu ersetzen oder Pfaddaten zu aktualisieren.

Dieser Artikel verwendet die Beispielillustration owl.svg. Die Beispiele wählen Kreise und Pfade im SVG DOM aus und erzeugen bearbeitete Versionen des ursprünglichen Vektorbildes.

Arbeitsablauf für das Bearbeiten mit CSS-Selektoren

Ein selektorbasierter Bearbeitungsablauf besteht meist aus vier Schritten:

1. Laden Sie die SVG-Quelldatei in ein SVGDocument.
2. Verwenden Sie QuerySelector() für ein Element oder QuerySelectorAll() für eine Elementliste.
3. Ändern Sie Attribute, Styles, Text, Geometrie oder Pfaddaten der ausgewählten Elemente.
4. Speichern Sie das bearbeitete SVG-Dokument.

Eine kurze Einführung in DOM-Navigation, XPath und Node-Filter finden Sie unter SVG in C# inspizieren und navigieren.

SVG-Elemente auswählen und bearbeiten

Das erste Beispiel bearbeitet die Quelldatei owl.svg. Die Eulenillustration besteht aus path- und circle-Elementen. Der Code verwendet CSS-Selektoren, um:

• circle-Elemente zu finden und ihre Attribute so zu ändern, dass die Augen größer und blau werden;
• das path-Element zu finden, das den Flügel darstellt, und sein Aussehen zu ändern.

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

// Edit SVG elements with CSS selectors in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(new Url("https://docs.aspose.com/svg/files/owl.svg")))
{
    // Get the root <svg> element of the document
    SVGSVGElement svgElement = document.RootElement;

    // Find the first element that matches the specified in selector
    SVGGElement gElement = svgElement.QuerySelector("g") as SVGGElement;

    // Find all <circle> elements in a <g> element
    NodeList circleNodes = gElement.QuerySelectorAll("circle");

    // Make big blue eyes
    foreach (Node circleNode in circleNodes)
    {
        SVGCircleElement circleElement = circleNode as SVGCircleElement;
        circleElement.R.BaseVal.Value *= 1.5F;
        circleElement.SetAttribute("stroke", "blue");
    }

    // Get a path for the owl's wing
    SVGPathElement wingPath = gElement.QuerySelector("path:nth-child(2)") as SVGPathElement;

    // Apply style attributes to the wing
    wingPath.SetAttribute("stroke-width", "16");
    wingPath.SetAttribute("stroke-dasharray", "2 8");

    document.Save(Path.Combine(OutputDir, "owl-edited1.svg"));
}

Die bearbeitete SVG-Datei können Sie hier öffnen: owl-edited1.svg.

Ausgewählte SVG-Elemente ersetzen

Das zweite Beispiel arbeitet weiter mit derselben Quelldatei owl.svg. Es wählt die ursprünglichen runden Augen aus und ersetzt sie durch quadratische Augen:

1. Erstellen Sie ein neues <g>-Element für die Ersatzrechtecke.
2. Verwenden Sie QuerySelectorAll("g:first-child > circle"), um Kreise in der ersten Gruppe auszuwählen.
3. Erstellen Sie <rect>-Elemente mit den erforderlichen Größen- und Style-Attributen.
4. Fügen Sie die Rechtecke in die neue Gruppe ein.
5. Entfernen Sie die ausgewählten <circle>-Elemente aus dem Dokument.

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

// Replace SVG circles with rectangles using CSS selectors in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(new Url("https://docs.aspose.com/svg/files/owl.svg")))
{
    // Get the root <svg> element of the document
    SVGSVGElement svgElement = document.RootElement;

    // Create a new <g> element with style attributes and append it as the last child of the <svg> element
    SVGGElement gElement = (SVGGElement)document.CreateElementNS(SvgNamespace, "g");
    gElement.SetAttribute("fill", "none");
    gElement.SetAttribute("stroke-width", "2");
    svgElement.AppendChild(gElement);

    // Find all <circle> elements from the first <g> element
    NodeList circleNodes = svgElement.QuerySelectorAll("g:first-child > circle");

    // Make square sky-blue eyes
    foreach (Node circleNode in circleNodes)
    {
        SVGCircleElement circleElement = circleNode as SVGCircleElement;

        float cx = circleElement.Cx.BaseVal.Value;
        float cy = circleElement.Cy.BaseVal.Value;
        float r = circleElement.R.BaseVal.Value;

        SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
        rectElement.X.BaseVal.Value = cx - r;
        rectElement.Y.BaseVal.Value = cy - r;
        rectElement.Width.BaseVal.Value = 3 * r;
        rectElement.Height.BaseVal.Value = 3 * r;
        rectElement.SetAttribute("stroke", "SkyBlue");

        // Add a <rectangle> element into the second (new) <g> element and remove <circle> elements
        gElement.AppendChild(rectElement);
        circleElement.Remove();
    }
    // Recolor last rectangle in the second (new) <g> element
    Element lastRect = gElement.LastElementChild;
    lastRect.SetAttribute("stroke", "red");

    document.Save(Path.Combine(OutputDir, "owl-svg-eyes.svg"));
}

Einen Pfad auswählen und seine Daten ändern

Der letzte Teil ändert den Flügel der Eule von einer Kurve zu einem Linienzug und färbt ihn neu. Das Beispiel wählt das path-Element aus, aktualisiert pfadbezogene Daten und speichert das Ergebnis:

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

// Modify SVG path data selected with CSS selectors in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "owl-svg-eyes.svg")))
{
    SVGSVGElement svgElement = document.RootElement;

    // Get a path for owl's body from the first <g> element
    Element bodyPath = (svgElement.QuerySelector("g:first-child") as SVGGElement).FirstElementChild;
    bodyPath.SetAttribute("stroke", "Teal");

    // Get a path for the owl's wing from the first <g> element
    SVGPathElement wingPath = svgElement.QuerySelector("g:first-child > path:nth-child(2)") as SVGPathElement;

    // Form new wing path data based on the old
    string d = "";
    foreach (SVGPathSeg pathSeg in wingPath.PathSegList)
    {
        if (pathSeg is SVGPathSegMovetoAbs)
        {
            SVGPathSegMovetoAbs pathSegMovetoAbs = pathSeg as SVGPathSegMovetoAbs;

            d += string.Format(" M {0} {1}", pathSegMovetoAbs.X, pathSegMovetoAbs.Y);
        }
        if (pathSeg is SVGPathSegCurvetoCubicAbs)
        {
            SVGPathSegCurvetoCubicAbs pathSegCurvetoCubicAbs = pathSeg as SVGPathSegCurvetoCubicAbs;

            d += string.Format(
                " L {0} {1} L {2} {3}",
                (pathSegCurvetoCubicAbs.X1 + pathSegCurvetoCubicAbs.X2) / 2F,
                (pathSegCurvetoCubicAbs.Y1 + pathSegCurvetoCubicAbs.Y2) / 2F,
                pathSegCurvetoCubicAbs.X,
                pathSegCurvetoCubicAbs.Y
            );
        }
    }
    // Set d attribute - new path data formation
    wingPath.SetAttribute("d", d.Trim());
    wingPath.SetAttribute("stroke", "Teal");

    document.Save(Path.Combine(OutputDir, "owl-edited2.svg"));
}

Das Bild vergleicht die ursprüngliche Eule und zwei bearbeitete Versionen.

Die zweite bearbeitete SVG-Datei können Sie hier öffnen: owl-edited2.svg.

FAQ

1. Wann sollte ich QuerySelector() statt QuerySelectorAll() verwenden?
Verwenden Sie QuerySelector(), wenn nur das erste passende Element benötigt wird. Verwenden Sie QuerySelectorAll(), wenn alle passenden Elemente geprüft oder bearbeitet werden sollen, zum Beispiel alle Kreise in einer Gruppe.

2. Können CSS-Selektoren SVG-Elemente selbst ändern?
Nein. Selektoren finden nur Elemente. Nachdem ein Element ausgewählt wurde, verwenden Sie DOM-Methoden und Eigenschaften wie SetAttribute(), AppendChild(), RemoveChild() oder typisierte SVG-Eigenschaften, um Änderungen vorzunehmen.

3. Können selektorbasierte Änderungen in PDF oder Bilder konvertiert werden?
Ja. Nach dem Bearbeiten des SVGDocument rufen Sie Converter.ConvertSVG(document, options, outputPath) mit passenden Speicheroptionen auf oder speichern zuerst die SVG-Datei und konvertieren sie später.

Nächste Schritte

• SVG in C# inspizieren und navigieren – DOM-Traversierung, XPath und benutzerdefinierte Node-Filter kennenlernen.
• SVG-Dateien in C# bearbeiten – Formen, Pfade und Text zu SVG-Dokumenten hinzufügen.
• SVG-Dateien in C# konvertieren – bearbeitete SVG-Dateien in PDF, XPS und Bildformate konvertieren.
• Beispiele ausführen – vollständige Beispiele von GitHub herunterladen und ausführen.