SVG Navigieren – Aspose.SVG for Python via .NET

Die Überprüfung des Inhalts von SVG-Dateien ist häufig erforderlich, um Informationen über die Datei, ihre Elemente und deren Hierarchie zu extrahieren. Aspose.SVG for Python via .NET-API ist vollständig kompatibel mit den offiziellen SVG-Spezifikationen und bietet umfassende Funktionalität für die Arbeit mit dem SVG Document Object Model (DOM). Diese API unterstützt eine Vielzahl von Navigations- und Inspektionsfunktionen für SVG-Inhalte.

In diesem Artikel erfahren Sie:

• wie man SVG-Inhalte als String anzeigt und den gesamten SVG-Inhalt zur einfachen Anzeige und Bearbeitung in ein String-Format extrahiert;
• wie man ein Dokument und seine Elemente mithilfe der API überprüft.
• So erhalten Sie Informationen zu einem bestimmten Element in einer SVG-Datei, z. B. Attribute und Stile.
• wie man mithilfe von CSS-Selektoren und XPath-Abfragen durch ein Dokument navigiert, um Elemente zu finden und zu bearbeiten.

Um diesem Tutorial weiterhin folgen zu können, sollten Sie die Bibliothek Aspose.SVG for Python via .NET in Ihrem Python-Projekt installieren und konfigurieren. Unsere Codebeispiele helfen Ihnen beim Erstellen, Laden und Lesen von SVG-Dateien mithilfe der Python-Bibliothek.

SVG-Inhalt anzeigen

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

1. Definieren Sie den vollständigen Pfad zur SVG-Datei, die Sie laden möchten.
2. Verwenden Sie die Klasse SVGDocument, um die SVG-Datei aus dem angegebenen Pfad zu laden.
3. Rufen Sie den äußeren HTML-Code des Stammelements des Dokuments mit der Eigenschaft outer_html ab.
4. Drucken Sie den HTML-Inhalt des SVG-Dokuments auf der Konsole aus, um dessen Struktur und Inhalt anzuzeigen.

using Aspose.Svg;
using System.IO;
...
import os
from aspose.svg import *

# Setup directories
data_dir = "data/"
document_path = os.path.join(data_dir, "document.svg")

# Load an SVG document
with SVGDocument(document_path) as document:
    html = document.document_element.outer_html

    print(html)
# View the document content

Navigation und Inspektion SVG mit DOM

Das Document Object Model (DOM) ist für die Navigation in SVG-Dateien von entscheidender Bedeutung, da es eine strukturierte Ansicht der Dokumentelemente und ihrer Beziehungen bietet. Es bietet programmgesteuerten Zugriff auf SVG-Elemente und -Attribute und ermöglicht so eine detaillierte Prüfung und Bearbeitung. Über das DOM können Entwickler mithilfe von Methoden durch die SVG-Struktur navigieren, um Elemente nach Tag-Namen, Klasse oder ID auszuwählen. Sie können auch CSS-Selektoren und XPath-Abfragen verwenden, um bestimmte Elemente effizient zu finden. Dieses hierarchische Modell erleichtert das Lesen und Ändern von SVG-Inhalten, das Abrufen detaillierter Informationen zu bestimmten Elementen und die flexible und leistungsstarke Interaktion mit SVG.

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. Dieses Code-Snippet zeigt, wie man ein SVG-Dokument lädt, bestimmte Elemente durchläuft (in diesem Fall <rect>) und sicher auf deren Attribute zugreift und diese ausdruckt:

1. Passen Sie die Variable <rect> so an, dass sie auf den tatsächlichen Speicherort Ihrer SVG-Datei verweist.
2. Verwenden Sie den Konstruktor SVGDocument(input_path), um eine SVG-Datei aus dem angegebenen <rect> zu laden.
3. Verwenden Sie die Methode get_elements_by_tag_name(“rect”), um alle <rect>-Elemente im SVG-Dokument zu durchlaufen.
4. Drucken Sie den Tag-Namen und die ID jedes <rect>-Elements.

fimport os
from aspose.svg import *

# Prepare a path to the source and output SVG file
data_dir = "data/"
input_path = os.path.join(data_dir, "shapes.svg")

# Load the SVG document
document = SVGDocument(input_path)

# Iterate over elements in the SVG document
for element in document.get_elements_by_tag_name("rect"):
    print(f"Element: {element.tag_name}, ID: {element.id}")

# Print attributes of the element
    attributes = element.attributes
    for i in range(attributes.length):
        attr = attributes[i]
        if attr is not None:
            print(f" Attribute: {attr.name} = {attr.value}")

Nachdem Sie dieses Beispiel ausgeführt haben, erhalten Sie das folgende Ergebnis:

Element: rect, ID: first-rect
  Attribute: id = first-rect
  Attribute: x = 50
  Attribute: y = 90
  Attribute: width = 100
  Attribute: height = 90
  Attribute: style = stroke-width:5; stroke:FireBrick
Element: rect, ID: second-rect
  Attribute: id = second-rect
  Attribute: x = 120
  Attribute: y = 150
  Attribute: width = 120
  Attribute: height = 120
  Attribute: style = stroke-width:10; stroke:DarkCyan
Element: rect, ID: third-rect
  Attribute: id = third-rect
  Attribute: x = 170
  Attribute: y = 220
  Attribute: width = 90
  Attribute: height = 90
  Attribute: style = stroke-width:5; stroke:FireBrick

Inspektion eines SVG-Dokuments und seiner Elemente

Aspose.SVG enthält eine Liste von Methoden, die auf den Element Traversal Specifications basieren. Mithilfe der API 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.

Hier ist der Python-Code, der ein SVG-Dokument ( shapes.svg) lädt, durch seine Elemente navigiert und die Tag-Namen ausgibt:

import os
from aspose.svg import *

# Setup directories
data_dir = "data/"
document_path = os.path.join(data_dir, "shapes.svg")

# Load a document
with SVGDocument(document_path) as document:
    # Get the root element
    element = document.document_element
    print(element.tag_name)  # svg

    # Get the last child element of the root (which should be a <g> element)
    element = element.last_element_child
    print(element.tag_name)  # g

    # Get the first child element of the <g> element (which should be a <rect> element)
    element = element.first_element_child
    print(element.tag_name)  # rect

1. Das Element <svg> ist ein Container und wird als äußerstes Element von SVG-Dokumenten verwendet. Um auf das Element <svg> zu verweisen, verwenden Sie die Eigenschaft document_element der Klasse SVGDocument, die direkten Zugriff auf das Element <svg> des Dokuments ermöglicht. Im obigen Codeausschnitt verwenden wir diese Methode.
2. Die Eigenschaft last_element_child gibt den letzten untergeordneten Elementknoten dieses Elements zurück. Im obigen Beispiel ist es das Element <g>.
3. Gemäß dem obigen Codeausschnitt gibt die Eigenschaft first_element_child das erste untergeordnete Element des Elements <g> zurück. Es ist das <rect>-Element.

Bearbeiten Sie SVG mit dem CSS-Selektor

Aspose.SVG for Python via .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 query_selector(selector) der Klasse Element können Sie das erste Element im Dokument abrufen, das mit dem angegebenen Selektor übereinstimmt. Die Methode query_selector_all(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.

Im folgenden Beispiel verwenden wir die Methode query_selector(), um durch ein SVG-Dokument zu navigieren und nach dem benötigten Element für Bearbeitungszwecke zu suchen:

import os
from aspose.svg import *

# Setup directories
output_dir = "output/"
data_dir = "data/"

document_path = os.path.join(data_dir, "shapes.svg")

# Load an SVG document from the file
document = SVGDocument(document_path)

# Get root svg element of the document
svg_element = document.root_element

# Get circle element to change color
circle_element = svg_element.query_selector("circle")

# Set a new "fill" attribute value for the circle element
circle_element.set_attribute("stroke", "DarkCyan")

# Save the SVG document to a file
output_path = os.path.join(output_dir, "circle-color.svg")
document.save(output_path)

Auf der Abbildung: das Quellbild (a) und das bearbeitete Bild (b).

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. XPath-Abfragen werden hauptsächlich mit der Methode evaluate() der Document-Klasse durchgeführt. Die Methode evaluate(expression, contextNode,solver, type, result) akzeptiert einen XPath-Ausdruck und andere gegebene Parameter und gibt ein Ergebnis des angegebenen Typs zurück. Dadurch können Sie XPath Query verwenden, um durch das Dokument ( shapes.svg) zu navigieren, wie im folgenden Codebeispiel gezeigt:

import os
from aspose.svg import *
from aspose.svg.dom.xpath import XPathResultType

# Setup directories
output_dir = "output/"
data_dir = "data/"
if not os.path.exists(output_dir):
    os.makedirs(output_dir)

# Prepare a path to a file loading
document_path = os.path.join(data_dir, "shapes.svg")

# Load an SVG document from the file
document = SVGDocument(document_path)

# Evaluate XPath expression
xpath_expression = "//rect[@x='120']"
xpath_result = document.evaluate(xpath_expression, document, None, XPathResultType.ANY, None)

# Get the next evaluated node and print its parent_element
node = xpath_result.iterate_next()
if node:
    print(node.parent_element)

Siehe auch

• Der Artikel Installation enthält eine Schritt-für-Schritt-Anleitung zur Installation von Aspose.SVG for Python via .NET auf Ihrem Computer.
• Wenn Sie daran interessiert sind, eine Lizenz einzurichten, eine getaktete Lizenz anzuwenden oder eine Evaluierungsversion für die Aspose.SVG-Python-Bibliothek auszuprobieren, lesen Sie bitte den Artikel Lizenzierung.
• Die Szenarien zum Konvertieren und Rendern von SVG in andere Formate werden im Abschnitt SVG-Dateien in Python konvertieren angezeigt.