SVG in C# inspizieren und navigieren

Bevor Code Farben ändert, Formen ersetzt, Daten extrahiert oder ein SVG-Dokument konvertiert, muss er oft zuerst das genaue Element finden, mit dem gearbeitet werden soll. Aspose.SVG for .NET gibt C#-Code DOM-Zugriff auf SVG-Inhalte. Dadurch können Sie Markup prüfen, durch den Dokumentbaum navigieren, Elemente mit CSS-Selektoren auswählen, XPath-Abfragen auswerten und Knoten mit benutzerdefinierten Filtern durchlaufen.

In diesem Artikel lernen Sie, wie Sie:

• SVG-Markup als Zeichenfolge anzeigen;
• auf das Wurzelelement <svg> zugreifen und untergeordnete Elemente durchlaufen;
• Elemente nach Tag-Namen, CSS-Selektor oder XPath-Abfrage finden;
• Knoten mit NodeIterator und NodeFilter filtern;
• Navigationsergebnisse als Ausgangspunkt für Bearbeitungs- oder Konvertierungsabläufe verwenden.

Schnellstart: SVG-Element in C# finden

Das folgende Beispiel lädt eine SVG-Datei, findet das erste <rect>-Element mit einem CSS-Selektor und gibt das Markup des Elements aus:

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

string inputPath = Path.Combine(DataDir, "shapes.svg");

using (SVGDocument document = new SVGDocument(inputPath))
{
    // Find the first rectangle in the SVG document
    Element rectangle = document.QuerySelector("rect");

    if (rectangle == null)
    {
        Console.WriteLine("No <rect> element was found.");
        return;
    }

    // Print the selected element as SVG markup
    Console.WriteLine(rectangle.OuterHTML);
}

Dieses Muster ist nützlich, wenn bereits klar ist, welches Element geprüft oder geändert werden soll. Die Prüfung auf null hält das Beispiel eindeutig, wenn das Eingabe-SVG das erwartete Element nicht enthält. Wenn die SVG-Struktur unbekannt ist, beginnen Sie mit DOM-Traversierung oder OuterHTML, um das Dokument zuerst zu verstehen.

SVG-Markup als Zeichenfolge anzeigen

Die Eigenschaft OuterHTML gibt das Markup eines Elements zusammen mit seinen untergeordneten Knoten zurück. Die Eigenschaft InnerHTML gibt nur den Inhalt des Elements zurück. Diese Eigenschaften eignen sich für schnelle Diagnose, Logging und die Kontrolle, welcher Teil des SVG-Dokuments ausgewählt wurde.

Dieses Beispiel gibt das Markup des Wurzelelements <svg> aus:

using Aspose.Svg;
using System;

// View SVG document content as OuterHTML in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "bezier-curves.svg")))
{
    // Use the OuterHTML property
    string html = document.DocumentElement.OuterHTML;

    Console.WriteLine(html);
}
// View the document content

Im SVG DOM navigieren

Ein SVG-Dokument ist ein XML-basierter Baum von Knoten. Auf das Wurzelelement <svg> kann auf zwei gängige Arten zugegriffen werden:

• DocumentElement gibt das Dokumentelement als allgemeines DOM-Element zurück.
• RootElement gibt dasselbe Wurzelelement als SVGSVGElement zurück.

using Aspose.Svg;
using Aspose.Svg.Dom;

Element documentElement = document.DocumentElement;
SVGSVGElement rootElement = document.RootElement;

Für eine einfache Traversierung innerhalb des SVG-Elementbaums verwenden Sie Element-Eigenschaften wie FirstElementChild, LastElementChild, NextElementSibling und Children. Hier meint Children die untergeordneten Elemente eines Element, zum Beispiel die Kinder von <svg> oder <g>, nicht die Sammlung Document.Children. Das folgende Beispiel geht vom Dokumentelement zu verschachtelten Kindelementen und gibt deren Tag-Namen aus:

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

// Traverse SVG document elements using the DOM in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "shapes_svg.svg")))
{
    // Get direct access to the <svg> element of the document
    Element element = document.DocumentElement;
    Console.WriteLine(element.TagName); // svg

    // Use the LastElementChild property
    element = element.LastElementChild;
    Console.WriteLine(element.TagName); // g

    // Use the FirstElementChild property
    element = element.FirstElementChild;
    Console.WriteLine(element.TagName); // rect
}

Elemente nach Tag-Namen finden

Verwenden Sie GetElementsByTagName(), wenn Sie alle Nachfahren mit demselben SVG-Tag benötigen, zum Beispiel alle <circle>- oder <rect>-Elemente. Die Methode gibt eine NodeList zurück, die im Code geprüft oder weiter gefiltert werden kann.

Das folgende Beispiel findet das erste <g>-Element, liest sein erstes Kindelement und gibt Breite und Höhe dieses <rect>-Elements aus:

using Aspose.Svg;
using System;
using System.IO;
using System.Linq;

// Extract information about a specific SVG element in C#

string documentPath = Path.Combine(DataDir, "shapes_svg.svg");

// Load a document from a file
using (SVGDocument document = new SVGDocument(documentPath))
{
    // Get the root <svg> element of the document
    Element svg = document.DocumentElement;

    // Find the first child element with a given tag name
    SVGGElement g = svg.GetElementsByTagName("g").First() as SVGGElement;
    SVGRectElement rect = g.FirstElementChild as SVGRectElement;

    Console.WriteLine("Height: {0}", rect.Height); // 100
    Console.WriteLine("Width: {0}", rect.Width); // 100
}

SVG-Elemente mit CSS-Selektoren finden

CSS-Selektoren sind oft der kürzeste Weg, um Elemente nach Tag-Namen, ID, Klasse, Attributen oder Position im SVG-Baum zu finden. QuerySelector() gibt das erste passende Element zurück. QuerySelectorAll() gibt alle passenden Elemente als NodeList zurück.

Das folgende Beispiel verwendet einen Attributselektor, um nur Rechtecke zu finden, deren Inline-Style FireBrick enthält, und gibt anschließend deren id-Werte aus. Das ist eine gezieltere Suche, als jedes <rect>-Element in der Datei auszuwählen.

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

string inputPath = Path.Combine(DataDir, "shapes.svg");

using (SVGDocument document = new SVGDocument(inputPath))
{
    // Select only rectangles whose style attribute contains "FireBrick"
    NodeList fireBrickRectangles = document.QuerySelectorAll("rect[style*='FireBrick']");

    if (fireBrickRectangles.Length == 0)
    {
        Console.WriteLine("No rectangles with FireBrick in the style attribute were found.");
        return;
    }

    foreach (Element rectangle in fireBrickRectangles)
    {
        Console.WriteLine(rectangle.GetAttribute("id"));
    }
}

Wenn das Eingabe-SVG Rechtecke mit FireBrick im Attribut style enthält, gibt das Beispiel deren id-Werte aus. Die explizite Prüfung auf ein leeres Ergebnis macht das Beispiel auch dann hilfreich, wenn keine passenden Elemente vorhanden sind.

CSS-Selektoren sind auch vor dem Bearbeiten nützlich. Größere Beispiele, in denen Elemente einer Eulenillustration ausgewählt und geändert werden, finden Sie unter SVG mit CSS-Selektoren bearbeiten.

SVG mit XPath navigieren

XPath ist hilfreich, wenn sich die Auswahlbedingung leichter als Dokumentabfrage ausdrücken lässt, etwa durch einen Attributwert oder eine Elementhierarchie. Aspose.SVG unterstützt XPath-Auswertung über Evaluate().

Das folgende Beispiel findet ein <rect>-Element, dessen Attribut x den Wert 120 hat, und gibt den ausgewählten Knoten aus:

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

string inputPath = Path.Combine(DataDir, "shapes.svg");

using (SVGDocument document = new SVGDocument(inputPath))
{
    // Evaluate the XPath expression against the SVG document
    IXPathResult result = document.Evaluate(
        "//rect[@x='120']",
        document,
        null,
        Dom.XPath.XPathResultType.Any,
        null);

    // Read the first matching node
    Element selectedElement = result.IterateNext() as Element;

    if (selectedElement == null)
    {
        Console.WriteLine("No rectangle with x=\"120\" was found.");
        return;
    }

    Console.WriteLine(selectedElement.OuterHTML);
}

In der Beispieldatei shapes.svg wählt dieser XPath-Ausdruck das Rechteck mit id="second-rect" aus. XPath ist besonders praktisch, wenn die Bedingung attributbasiert ist oder das Zielelement leichter über seine Position im XML-Baum beschrieben werden kann.

Knoten mit NodeIterator filtern

Verwenden Sie CreateNodeIterator(), wenn die Traversierung durch das Dokument laufen soll und ein benutzerdefinierter Filter entscheidet, welche Knoten akzeptiert werden. Ein von NodeFilter abgeleiteter Filter gibt FILTER_ACCEPT für Knoten zurück, die für den Iterator sichtbar sein sollen, und FILTER_REJECT für Knoten, die übersprungen werden sollen.

Das folgende Beispiel erstellt einen Iterator, der nur <rect>-Elemente akzeptiert:

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

// Iterate SVG rectangle nodes with a custom NodeFilter in C#

using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "shapes.svg")))
{
    // Create a node iterator
    using (INodeIterator iterator = document.CreateNodeIterator(document, NodeFilter.SHOW_ALL, new RectFilter()))
    {
        Node node;
        while ((node = iterator.NextNode()) != null)
        {
        }
    }
}

Die Klasse RectFilter akzeptiert Knoten, deren NodeName rect ist:

public class RectFilter : NodeFilter
{
    public override short AcceptNode(Node node)
    {
        return string.Equals("rect", node.NodeName)
            ? FILTER_ACCEPT
            : FILTER_REJECT;
    }
}

NextNode() gibt den nächsten akzeptierten Knoten zurück und verschiebt die Iteratorposition. Das ist nützlich, wenn Sie eine wiederverwendbare Traversierungsregel benötigen und nicht nur einen einmaligen Selektor.

FAQ

1. Sollte ich CSS-Selektoren oder XPath verwenden, um SVG-Elemente zu finden?
Verwenden Sie CSS-Selektoren für typische SVG-Auswahlaufgaben, etwa nach Tag-Namen, ID, Klasse, Attributen oder Eltern-Kind-Beziehungen. Verwenden Sie XPath, wenn sich die Abfrage besser als Dokumentpfad formulieren lässt oder wenn Sie XML-orientierte Auswahlregeln benötigen.

2. Was ist der Unterschied zwischen DocumentElement und RootElement?
DocumentElement stammt aus der allgemeinen DOM-Document-API und gibt das Dokumentelement als Element zurück. RootElement gehört zu SVGDocument und gibt das Wurzelelement <svg> als SVGSVGElement zurück, das SVG-spezifische Member bereitstellt.

3. Kann ich SVG vor dem Bearbeiten oder Konvertieren inspizieren?
Ja. Ein typischer Ablauf ist: SVG-Datei laden, ihre Struktur mit OuterHTML, DOM-Traversierung, CSS-Selektoren oder XPath prüfen und erst danach ausgewählte Elemente ändern oder das Dokument an Konvertierungscode übergeben.

4. Kann ich ein erzeugtes oder bearbeitetes SVG prüfen, ohne es zuerst zu speichern?
Ja. Nach dem Erstellen oder Bearbeiten eines SVGDocument können Sie DocumentElement.OuterHTML lesen oder ausgewählte Elemente direkt im Speicher prüfen. Speichern ist nur nötig, wenn das Dokument in eine Datei, einen Stream oder ein anderes Ziel geschrieben werden soll.

Nächste Schritte

• SVG-Dateien in C# bearbeiten – SVG-Elemente hinzufügen, aktualisieren und speichern.
• SVG mit CSS-Selektoren bearbeiten – größere Beispiele für selektorbasiertes Bearbeiten ansehen.
• SVG-Dokumente speichern – inspizierte oder geänderte SVG-Inhalte speichern.
• Beispiele ausführen – vollständige Beispiele von GitHub herunterladen und ausführen.