Helpful resources ▼
  Download   Pricing   Buy

SVG-Transformationen – SVG drehen, skalieren und verschieben

In SVG werden Transformationen verwendet, um die Position, Größe, Ausrichtung und Neigung von SVG-Elementen innerhalb der SVG-Zeichenfläche zu ändern. SVG-Objekte können mithilfe der Eigenschaften des Transformationsattributs transformiert werden: Übersetzen, Skalieren, Drehen, SkewX, SkewY und Matrix. Mit der Aspose.SVG for .NET-Bibliothek können Sie diese Transformationen programmgesteuert durchführen. In diesem Kapitel finden Sie einen allgemeinen Überblick darüber, wie Sie mit Aspose.SVG mit Transformationen arbeiten können.

Das aktuelle Kapitel beschreibt beliebte SVG-Transformationen sowie C#-Beispiele für die gängigsten Transformationsszenarien.

  • SVG drehen – In diesem Artikel wurden C#-Beispiele für die SVG-Rotation behandelt. Berücksichtigte Fälle der Verwendung der Funktion rotate() im Attribut transform sowie einer Transformationsmatrix matrix(a,b,c,d,e,f).
  • SVG-Skalierung – In diesem Artikel wurden C#-Beispiele für die SVG-Skalierung behandelt.
  • SVG übersetzen – In diesem Abschnitt erfahren Sie, wie Sie SVG programmgesteuert in C# übersetzen.

Ein paar Möglichkeiten, SVG in C# zu transformieren

  1. Verwenden von transform-Attributeigenschaften. Mit den Eigenschaften von Transformationsattributen in SVG können Sie Elemente mithilfe der folgenden Transformationsfunktionen bearbeiten:
  1. Verwendung der Transformationsmatrix. Die Transformationsmatrix ist eine mathematische Methode zur Beschreibung von SVG-Transformationen. Die Matrix enthält Werte für Skalierung, Drehung, Neigung und Übersetzung und bietet so mehr Flexibilität für komplexe Transformationen. Die Transformationsmatrix kombiniert Translations-, Skalierungs-, Rotations- und Schrägtransformationen.

Diese beiden Möglichkeiten bieten unterschiedliche Grade an Komplexität und Präzision, wobei das Attribut transform für einfache Transformationen einfacher ist, während die Transformationsmatrix eine bessere Kontrolle über den Transformationsprozess ermöglicht. Schauen wir uns diese Methoden anhand von C#-Beispielen für eine SVG-Transformation an, beispielsweise eine SVG-Übersetzung.

SVG-Transformation – Translate()-Funktion

Der folgende C#-Codeausschnitt zeigt, wie man ein SVG-Element <rect> erstellt, seine Attribute festlegt und eine Übersetzungstransformation mithilfe des Attributs transform anwendet. Die Transformation verschiebt das Rechteck um 150 Einheiten nach rechts und 50 Einheiten nach unten.

  1. Erstellen Sie eine Instanz der Klasse SVGDocument. Die Eigenschaft RootElement verweist auf das Stammelement <svg> des Dokuments.
  2. Erstellen Sie ein <rect>-Element mit Attributen und fügen Sie es dem <svg>-Element hinzu:
    • Sie können die Methode CreateElementNS() verwenden, um eine Instanz der Klasse SVGRectElement zu erstellen.
    • Rufen Sie die Methode SetAttribute(name, value) auf, um Attribute festzulegen, die Position, Größe, Füllung und Transformation angeben. Das Attribut transform wird auf das Element <rect> mit dem Wert translate(150, 50) gesetzt. Dabei wird eine Translationstransformation angewendet, die das Rechteck um 150 Einheiten nach rechts und 50 Einheiten nach unten verschiebt.
  3. Um das rectElement zu svgElement hinzuzufügen, können Sie die Methode AppendChild() verwenden.
  4. Rufen Sie die Methode Save() auf, um das resultierende SVG-Bild in einer durch den Pfad angegebenen lokalen Datei zu speichern.
1using Aspose.Svg;
2using System.IO;
 1// Translate an SVG rectangle using the transform attribute in C#
 2
 3// Create a new SVG document
 4using (SVGDocument document = new SVGDocument())
 5{
 6    SVGSVGElement svgElement = document.RootElement;
 7
 8    // Create a <rect> element and set its attributes
 9    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS("http://www.w3.org/2000/svg", "rect");
10    rectElement.X.BaseVal.Value = 50;
11    rectElement.Y.BaseVal.Value = 50;
12    rectElement.Width.BaseVal.Value = 100;
13    rectElement.Height.BaseVal.Value = 100;
14    rectElement.SetAttribute("fill", "blue");
15
16    // Apply translate() function to the rectangle
17    rectElement.SetAttribute("transform", "translate(150, 50)");
18
19    // Append the <rect> element to the <svg> element
20    svgElement.AppendChild(rectElement);
21
22    // Save the document
23    document.Save(Path.Combine(OutputDir, "translate.svg"));
24}
Example-TranslateSvg.cs hosted with ❤ by GitHub

SVG-Transformationsmatrix

Hier sehen wir uns das C#-Beispiel wie oben an: Erstellen Sie ein SVG-Element <rect>, legen Sie seine Attribute fest und implementieren Sie die Übersetzung mithilfe einer Transformationsmatrix. Schauen wir uns den C#-Code zur Implementierung der Transformationsmatrix genauer an.

  1. Verwenden Sie die Methode GetCTM() der Klasse SVGGraphicsElement, die die aktuelle Transformationsmatrix (CTM) zurückgibt, die dem Element <rect> zugeordnet ist. Das CTM stellt die kumulativen Transformationen dar, die auf das Element angewendet werden, und enthält Informationen zu Translation, Rotation, Skalierung und Schrägstellung, die auf das Element angewendet werden können.
  2. Nachdem Sie das CTM erhalten haben, verwenden Sie die Methode Translate(), die eine Übersetzungstransformation auf der aktuellen Matrix nachmultipliziert und die resultierende Matrix zurückgibt. Die Translate(dx, dy)-Methode benötigt zwei Argumente – dx und dy – die horizontale bzw. vertikale Translationsabstände darstellen.
  3. Konstruieren Sie ein transformAttribute – eine String-Darstellung einer 2D-Transformationsmatrix unter Verwendung der Werte aus der modifizierten transformationMatrix. Die Matrixschreibweise ist matrix(a, b, c, d, e, f).
  4. Rufen Sie die Methode SetAttribute() auf, um das Attribut transform des Elements <rect> mithilfe der Zeichenfolge transformAttribute festzulegen.
1using Aspose.Svg;
2using System.IO;
 1// Translate an SVG element using a transformation matrix in C#
 2
 3// Create a new SVG document
 4using (SVGDocument document = new SVGDocument())
 5{
 6    SVGSVGElement svgElement = document.RootElement;
 7
 8    // Create a <rect> element and set its attributes
 9    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS("http://www.w3.org/2000/svg", "rect");
10    rectElement.X.BaseVal.Value = 150;
11    rectElement.Y.BaseVal.Value = 50;
12    rectElement.Width.BaseVal.Value = 100;
13    rectElement.Height.BaseVal.Value = 100;
14    rectElement.SetAttribute("fill", "blue");
15    svgElement.AppendChild(rectElement);
16
17    // Get the current transformation matrix associated with the rectElement
18    SVGMatrix transformationMatrix = rectElement.GetCTM();
19    transformationMatrix = transformationMatrix.Translate(150, 50);
20
21    // Apply the transformation matrix to the rectElement
22    string transformAttribute = "matrix(" + transformationMatrix.A + "," + transformationMatrix.B + ","
23                                + transformationMatrix.C + "," + transformationMatrix.D + "," + transformationMatrix.E + ","
24                                + transformationMatrix.F + ")";
25    rectElement.SetAttribute("transform", transformAttribute);
26
27    // Save the document
28    document.Save(Path.Combine(OutputDir, "translation-matrix.svg"));
29}
Example-SvgTranslationMatrix.cs hosted with ❤ by GitHub

Siehe auch

Bild- und Textvektorisierung SVG drehen
Close
Loading

Analyzing your prompt, please hold on...

An error occurred while retrieving the results. Please refresh the page and try again.

Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.

© Aspose Pty Ltd 2001-2025. All Rights Reserved.