Navigation & Inspektion SVG – Aspose.SVG für .NET

Manchmal müssen Sie den Inhalt von SVG-Dateien überprüfen, um beispielsweise Informationen über die Datei, die Elemente und die Hierarchie zu erhalten. Aspose.SVG für .NET API ist vollständig kompatibel mit offiziellen SVG-Spezifikationen und kann zum Durchlaufen des SVG Document Object Model (DOM) verwendet werden. Die API unterstützt eine Vielzahl von Navigations- und Inspektionsfunktionen der SVG-Inhalte.

In diesem Abschnitt erfahren Sie:

• wie man einen SVG-Inhalt als String anzeigt;
• wie man mithilfe der API eine detaillierte Prüfung des Dokuments und seiner Elemente durchführt;
• Welche Möglichkeiten gibt es, Informationen zu einem bestimmten Element aus der SVG-Datei zu erhalten?
• über die Verwendung benutzerdefinierter Filter zum Durchlaufen der Dokumentelemente;
• wie man mit CSS Selector oder XPath Query durch das Dokument navigiert.

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-Inhalt anzeigen

Der einfachste Weg, den Dokumentinhalt zu überprüfen, besteht darin, den Inhalt als Zeichenfolge zu betrachten. Die Eigenschaften InnerHTML und OuterHTML der Klasse Element geben ein XML- (oder HTML-) Fragment zurück, das das Element und seinen Inhalt darstellt. Sie wurden speziell für die Anzeige von SVG-Inhalten als String entwickelt. Das folgende Codebeispiel zeigt, wie der Inhalt der Datei bezier-curves.svg in der Konsole angezeigt wird.

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

    string documentPath = Path.Combine(DataDir, "bezier-curves.svg");

	// Load an SVG document
	using (var document = new SVGDocument(documentPath))
	{
	     var html = document.DocumentElement.OuterHTML;

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

Navigation und Inspektion SVG mit DOM

Extrahieren Sie Informationen zu einem bestimmten SVG-Element

Das folgende Beispiel zeigt, wie Informationen zu einem bestimmten SVG-Element aus einer Datei shapes.svg extrahiert werden:

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

    //Load a document from a file
    string documentPath = Path.Combine(DataDir, "shapes.svg");

    using (var document = new SVGDocument(documentPath))
    {
        // Get the root svg element of the document
    	var svg = document.DocumentElement;

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

        var rect = g.FirstElementChild as SVGRectElement;

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

Im Beispiel ermöglicht die Verwendung der Eigenschaft DocumentElement den direkten Zugriff auf das Element <svg> des Dokuments. Die Methode GetElementsByTagName() der Klasse Element gibt eine NodeList aller Nachkommenelemente mit einem bestimmten Tag-Namen zurück; In diesem Fall ist das Rückgabeelement das erste <g>-Element. Die Eigenschaft FirstElementChild gibt den ersten untergeordneten Elementknoten dieses Elements zurück. Im Beispiel ist das erste untergeordnete Element im Element <g> das Element <rect>, für das die Werte für Breite und Höhe gedruckt werden.

Inspektion eines SVG-Dokuments und seiner Elemente

Aspose.SVG enthält eine Liste von Methoden, die auf den Element Traversal Specifications basieren. Mit der API ( shapes.svg) können Sie eine detaillierte Prüfung des Dokuments und seiner Elemente durchführen. Das folgende Codebeispiel zeigt die allgemeine Verwendung von Element Traversal-Funktionen.

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

    // Load a document
	string documentPath = Path.Combine(DataDir, "shapes.svg");

    using (var document = new SVGDocument(documentPath))
    {
        var element = document.DocumentElement;
        Console.WriteLine(element.TagName); // svg
        
        element = element.LastElementChild;
        Console.WriteLine(element.TagName); // g

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

Das Element <svg> ist ein Container und wird als äußerstes Element von SVG-Dokumenten verwendet. Um auf das Element <svg> zu verweisen, können Sie verschiedene Möglichkeiten anwenden:

• Die Eigenschaft DocumentElement der Klasse Document ermöglicht den direkten Zugriff auf das Element <svg> des Dokuments. Im obigen Codeausschnitt verwenden wir diese Methode.
• Die Eigenschaft RootElement der Klasse SVGDocument gibt das Stammelement <svg> in der Dokumenthierarchie zurück. Um das Element <svg> anzugeben, können Sie den folgenden Code anwenden:

var svgElement = document.RootElement;

Die Eigenschaft LastElementChild der Klasse Document gibt das letzte untergeordnete Element des Elements <svg> zurück. Es ist das <g>-Element. Gemäß dem obigen Codeausschnitt wird das variable Element erneut überladen und die Eigenschaft FirstElementChild gibt das erste untergeordnete Element des <g>-Elements zurück. Es ist das <rect>-Element.

Benutzerdefinierte Filterverwendung

Mit der Aspose.SVG-API können Sie benutzerdefinierte Filter definieren und diese zum Durchlaufen der Dokumentelemente verwenden, wie im folgenden Codebeispiel gezeigt:

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

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

where the RectFilter class is defined as follows:

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

Die Methode CreateNodeIterator(Node, Int64, INodeFilter) der Schnittstelle IDocumentTraversal erstellt einen neuen Iterator, der am angegebenen Node (in unserem Beispiel ist es das document) verwurzelt ist. Als Parameter benötigt die Methode Node, das Flag Int64, das Knotentypen für den Iterator angibt, und den zu verwendenden INodeFilter (in unserem Beispiel ist es RectFilter()).

Die Klasse RectFilter erbt von der Klasse NodeFilter die Methode AcceptNode(Node n). Die Methode nimmt einen Node und testet, ob er den Filter besteht oder nicht; Die Methode gibt einen Short zurück, der angibt, ob der Knoten gefunden wurde oder nicht.

Im Iterator verwenden wir die Methode NextNode() der Schnittstelle INodeIterator, um auf alle Knoten des Dokuments zuzugreifen. Der erste Aufruf von NextNode() gibt den ersten Knoten zurück und verschiebt die Position des Iterators in der Menge. Die Eigenschaft OuterHTML der Klasse Element gibt den Inhalt des Elements zurück, das gedruckt wird.

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.

Bearbeiten Sie SVG mit dem CSS-Selektor

Aspose.SVG für .NET implementiert auch die CSS-Selektor-Spezifikation, die es Ihnen ermöglicht, mithilfe eines CSS-ähnlichen Stils durch das Dokument zu navigieren.

Mit der Methode QuerySelector(selector) der Klasse Element können Sie das erste Element im Dokument abrufen, das mit dem angegebenen Selektor übereinstimmt. Die Methode QuerySelectorAll(selector) verwendet als Parameter den Abfrageselektor und gibt eine NodeList aller Elemente zurück, die mit dem Selektor übereinstimmen. An den resultierenden Elementen können Sie verschiedene Manipulationen vornehmen: Text, Attribute, CSS-Stile usw. ändern.

In den folgenden Beispielen verwenden wir die Methoden QuerySelector() und QuerySelectorAll() zur Navigation durch ein SVG-Dokument und suchen nach den benötigten Elementen.

Beispiel 1

In Beispiel 1 bearbeiten wir die Quelldatei owl.svg – das Eulen-SVG-Bild, das durch die Elemente <path> und <circle> gezeichnet wird.

• Wir finden alle Kreiselemente im SVG-Dokument und ändern ihre Eigenschaften. – Machen Sie große blaue Augen für die Eule.
• Wir finden das Wegelement für einen Flügel der Eule und dekorieren es.

Verwendung des CSS-Selektors:

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

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

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

        // Find all circle elements in 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 path for an owl 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(OutputDir + "owl-edited1.svg");
    }

Sie können die bearbeitete SVG-Datei anzeigen und speichern, indem Sie dem Link owl-edited1.svg folgen.

Beispiel 2

In diesem Beispiel zeigen wir, wie Sie mit dem CSS-Selektor zu Bearbeitungszwecken durch ein Dokument navigieren. Wir bearbeiten weiterhin die Quelldatei owl.svg:

• Im ersten Teil von Beispiel 2 werden die runden Augen der Eule in quadratische umgewandelt und neu eingefärbt.

Wir erstellen ein neues <g>-Element, fügen darin die gemeinsamen Attribute für Kinder hinzu (es werden neue quadratische Augen sein) und hängen es als letztes untergeordnetes Element im <svg>-Element an (siehe SVG-Datei bearbeiten); Mit der Methode QuerySelectorAll(“g:first-child > circle”) finden wir alle Kreise im ersten <g>-Element; Dann erstellen wir <rect>-Elemente mit den Größenattributen, fügen Rechtecke in das zweite <g>-Element ein und entfernen die Kreiselemente.

Der folgende Codeausschnitt zeigt, wie Sie diese Aufgabe realisieren:

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

    // Create a new g element with style attributes and append it as the last child in svg element
    var 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)
    {
        var circleElement = circleNode as SVGCircleElement;

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

        var 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 the rectangle element into the last (new) g element 
        gElement.AppendChild(rectElement);

    	// Remove the circle elements
        circleElement.Remove();
    }
    // Recolor last rectangle in the last (new) g element
    Element lastRect = gElement.LastElementChild;
    lastRect.SetAttribute("stroke", "red");

• Im zweiten Teil von Beispiel 2 wird der Pfad des Eulenflügels von der Kurve in eine Polylinie geändert und neu eingefärbt.

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

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

    // Get path for owl 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(OutputDir + "owl-edited2.svg");

Auf der Abbildung: das Quellbild (a), ein bearbeitetes Bild gemäß Beispiel 1 (b), ein bearbeitetes Bild gemäß Beispiel 2 (c).

In den obigen Beispielen nehmen wir die Quelldatei owl.svg und bearbeiten einige Elemente. Wir haben versucht, die Augen und Flügel der Eule mithilfe der Navigations- und Inspektionsfunktionen der Aspose.SVG-API auf verschiedene Weise zu dekorieren. Sie können die bearbeitete SVG-Datei anzeigen und speichern, indem Sie dem Link owl-edited2.svg folgen.

Navigieren Sie durch SVG mit XPath-Abfrage

XPath Query ( XML Path Language), oft einfach als XPath bezeichnet, ist eine Abfragesprache, die zum Abfragen von Daten aus Dokumenten verwendet wird. Es basiert auf einer DOM-Darstellung des SVG-Dokuments und wählt Knoten nach verschiedenen Kriterien aus. Die Syntax der XPath-Ausdrücke ist recht einfach, und was noch wichtiger ist, sie ist leicht zu lesen und zu unterstützen.

Aspose.SVG verfügt außerdem über eine leistungsstarke XPath-Spezifikationsimplementierung sowie Traversal-Spezifikationen. Dadurch können Sie XPath Query verwenden, um durch das Dokument ( shapes.svg) zu navigieren, wie im folgenden Codebeispiel gezeigt:

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

    using (var document = new SVGDocument(Path.Combine(DataDir, "shapes.svg")))
    {
        //  Evaluate XPath expression
        var xpathResult = document.Evaluate("//rect[@x='120']", document, null, (Dom.XPath.XPathResultType)XPathResultType.Any, null);

        //  Get the next evaluated node
        Console.WriteLine((xpathResult.IterateNext() as Element)?.OuterHTML); 
    }

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.