SVG drehen – C#-Beispiele

So drehen Sie SVG-C#-Code

Mit der Aspose.SVG for .NET-Bibliothek können Sie eine Rotationstransformation programmgesteuert durchführen. In diesem Artikel werden C#-Beispiele für die SVG-Rotation behandelt. Es werden Fälle der Verwendung der Funktion rotate() im Attribut transform und in der Transformationsmatrix – matrix(a,b,c,d,e,f) – berücksichtigt.

Rotate()-Funktion

Der folgende C#-Codeausschnitt zeigt, wie man ein SVG-Element <rect> erstellt, seine Attribute festlegt und eine Transformation mithilfe der Funktion rotate() für das Attribut transform anwendet.

Erstellen Sie eine Instanz der Klasse SVGDocument. Die Eigenschaft RootElement verweist auf das Stammelement <svg> des Dokuments.
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() auf, um Attribute festzulegen, die Position, Größe, Füllung und Transformation angeben. Verwenden Sie die Funktion rotate() für das Attribut transform, das den zu drehenden Winkel und die Koordinaten des zu drehenden Punkts annimmt. Wenn keine Koordinaten angegeben sind, erfolgt die Drehung um den Punkt (0, 0) des ursprünglichen Koordinatensystems.
- Um das rectElement zu svgElement hinzuzufügen, können Sie die Methode AppendChild() verwenden.
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;
 3...
 4
 5    // Create a new SVG document
 6    using (var document = new SVGDocument())
 7    {
 8        var svgElement = document.RootElement;
 9
10        // Create a rect element and set its attributes
11        var rectElement = (SVGRectElement)document.CreateElementNS("http://www.w3.org/2000/svg", "rect");
12        rectElement.X.BaseVal.Value = 150;
13        rectElement.Y.BaseVal.Value = 50;
14        rectElement.Width.BaseVal.Value = 100;
15        rectElement.Height.BaseVal.Value = 100;
16        rectElement.SetAttribute("fill", "purple");
17
18        // Apply rotate() function to the SVG
19        rectElement.SetAttribute("transform", "rotate(45)");
20
21        // Append the rect element to the SVG
22        svgElement.AppendChild(rectElement);
23
24        // Save the document
25        string outputPath = "rotate-svg-rect.svg";
26        document.Save(Path.Combine(OutputDir, outputPath));
27    }

Die Transformation dreht das Rechteck um 45 Grad um den Punkt (0, 0) des ursprünglichen Koordinatensystems, da die Koordinaten des Punktes, um den das Element gedreht werden muss, nicht an die Funktion rotate() übergeben wurden. Der Übersichtlichkeit halber zeigt die Abbildung die Koordinatensysteme vor und nach der Drehung. Dies verdeutlicht, dass die Rotationstransformation durch Drehen des Koordinatensystems erfolgt.

Text „Originalrechteck (a) und Bild mit dem gedrehten Rechteck (b).“

SVG-Element drehen – SVG um die Mitte drehen

Der folgende C#-Codeausschnitt zeigt, wie Sie ein erforderliches SVG-Element in einer vorhandenen SVG-Datei finden und drehen. Sie sollten ein paar Schritte befolgen:

Laden Sie eine SVG-Quelldatei mit einem der SVGDocument()-Konstruktoren.
Holen Sie sich das Stammelement <svg> des Dokuments.
Verwenden Sie die Methode QuerySelector(), um das erste zu drehende Rechteckelement zu finden. Mit der QuerySelector(selector)-Methode der Element-Klasse können Sie das erste Element im Dokument abrufen, das mit dem angegebenen Selektor übereinstimmt.
Legen Sie ein transform-Attribut mit dem Wert rotate(45, 100, 140) für das Rechteckelement fest. Diese Transformation dreht das Element um einen Winkel von 45 Grad (im Uhrzeigersinn) um einen angegebenen Punkt (Mittelpunkt des ausgewählten Rechtecks) mit den Koordinaten (100, 140).
Rufen Sie die Methode Save() auf, um das resultierende SVG-Bild in einer lokalen Datei zu speichern.

 1using Aspose.Svg;
 2using System.IO;
 3...
 4    // Load an SVG document from a file
 5    var document = new SVGDocument(Path.Combine(DataDir, "shapes.svg"));
 6
 7    // Get root <svg> element of the document
 8    var svgElement = document.RootElement;
 9
10    // Get <rect> element to rotate
11    var rectElement = svgElement.QuerySelector("rect") as SVGRectElement;
12
13    // Set a new "transform" attribute using rotate() function for the rectangle element
14    rectElement.SetAttribute("transform", "rotate(45, 100, 140)");
15
16    // Save the document
17    document.Save(Path.Combine(OutputDir, "rotate-element.svg"));

Die folgende Abbildung zeigt die ursprüngliche SVG-Datei (a) und das Bild mit dem gedrehten ersten Rechteckelement (b). Diese Transformation veränderte das Erscheinungsbild des Rechtecks im Verhältnis zu anderen Elementen. Position, Breite und Höhe des Rechtecks bleiben gleich, es wird jedoch optisch um den angegebenen Punkt gedreht – in diesem Fall die Mitte des Rechtecks.

Text „Original-SVG-Bild (a) und Bild mit dem gedrehten ersten Rechteckelement (b).“

Hinweis: Um ein SVG-Element um seinen Mittelpunkt oder einen anderen Punkt zu drehen, müssen Sie die Funktion rotate(angle, cx, cy) verwenden, die das Element um einen Winkel um den Punkt an den Koordinaten (cx, cy) dreht. Bestimmen (berechnen) Sie die Position des Bildmittelpunkts (seine Koordinaten) und führen Sie eine Drehung durch.

SVG-Element drehen – mit SVG Builder

Hier sehen wir uns das gleiche Beispiel an: Drehen des ersten <rect>-Elements in der Datei shapes.svg um seinen Mittelpunkt. Dieses Mal werden wir diese Aufgabe jedoch mit dem SVG Builder erledigen. Die SVG Builder API bietet Entwicklern ein leistungsstarkes Tool zum optimierten Erstellen und Aktualisieren von SVG-Elementen. In diesem Codeausschnitt:

– Die Methode GetElementsByTagName() wird verwendet, um das erste <rect>-Element aus dem SVG-Dokument abzurufen. – Eine neue SVGRectElementBuilder-Instanz wird erstellt, um die Eigenschaften des abgerufenen <rect>-Elements zu ändern.

Die Methode Transform() wird verwendet, um eine Rotationstransformation auf das Rechteck anzuwenden. In diesem Fall wird das Rechteck um 45 Grad um den als Drehpunkt angegebenen Punkt (100, 140) gedreht. Diese Transformation ändert die Ausrichtung des Rechtecks innerhalb des SVG-Dokuments.
Nach der Konfiguration des <rect>-Elements mit der gewünschten Transformation wird die Methode Build() aufgerufen, um den Konstruktionsprozess abzuschließen und die Änderungen auf das Element anzuwenden.

 1using Aspose.Svg.Builder;
 2using System.Linq;
 3using System.IO;
 4...
 5    // Load an SVG document
 6    using (var document = new SVGDocument(Path.Combine(DataDir, "shapes.svg")))
 7    {
 8        // Find the first <rect> element for rotation
 9        var rect = document.GetElementsByTagName("rect").First() as SVGRectElement;
10
11        // Rotate the first <rect> element around its center using the SVGRectElementBuilder
12        new SVGRectElementBuilder()
13            .Transform(t => t.Rotate(45, 100, 140))
14            .Build(rect);
15
16        // Save the document
17        document.Save(Path.Combine(OutputDir, "rotate-element-using-builder.svg"));
18    }

Die Methode Transform() ist Teil der SVG Builder-API, die es Entwicklern ermöglicht, Transformationen programmgesteuert auf SVG-Elemente anzuwenden. Transformationen in SVG ermöglichen es Entwicklern, die Position, Drehung, Skalierung und Neigung von SVG-Elementen zu ändern. Die Methode Transform() verwendet normalerweise eine oder mehrere Transformationsfunktionen als Argumente, die jeweils einen bestimmten Transformationstyp angeben. Zu diesen Funktionen gehören:

Translation Translate() – verschiebt das Element entlang der x- und y-Achse.
Rotation Rotate() – dreht das Element um einen angegebenen Punkt.
Skalierung Scale() – skaliert das Element entlang der x- und y-Achse.
Verzerren von SkewX() und SkewY() – verzerrt das Element entlang der x- bzw. y-Achse.

Die Methode Transform() ermöglicht die Verkettung mehrerer Transformationsfunktionen, um komplexere Transformationen anzuwenden.

Der Artikel SVG Builder API untersucht die Funktionen der Aspose.SVG Builder API zum Erstellen und Ändern von SVG-Elementen in C#. Die SVG Builder-API wurde entwickelt, um die Erstellung und Aktualisierung von SVG-Elementen in C# zu optimieren. Sie werden die Effizienz von Fluent Builder Pattern und Mixins bei der SVG-Manipulation sehen. Sie erfahren mehr über die Klassen und Methoden, spezialisierte Builder und wie sie die SVG-Programmierung vereinfachen.

SVG-Transformationsmatrix – Matrix drehen

Hier sehen wir uns das C#-Beispiel zum Drehen eines gesamten SVG-Bildes anstelle eines einzelnen Elements an und implementieren die Transformation mithilfe einer Rotationsmatrix. Schauen wir uns den C#-Code zum Anwenden der Rotationsmatrix genauer an.

Laden Sie eine SVG-Quelldatei mit einem der SVGDocument()-Konstruktoren.
Holen Sie sich das Stammelement <svg> des Dokuments.

Hinweis: Um eine Transformation auf das gesamte SVG-Bild anzuwenden, müssen Sie das Attribut transform auf das Stammelement <svg> anwenden.

Verwenden Sie die Methode GetCTM() der Klasse SVGGraphicsElement, die die aktuelle Transformationsmatrix (CTM) zurückgibt, die dem Element <svg> 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.
Nachdem Sie das CTM erhalten haben, verwenden Sie die Methode Rotate(), die eine Rotationstransformation auf der aktuellen Matrix nachmultipliziert und die resultierende Matrix zurückgibt. Die Rotate(angle)-Methode benötigt nur ein Argument – den Winkel. Dieser Parameter ist obligatorisch und stellt den Rotationsbetrag dar, den Sie anwenden möchten.
Konstruieren Sie ein transformAttribute – eine String-Darstellung einer 2D-Transformationsmatrix unter Verwendung der Werte aus der modifizierten Transformationsmatrix transformationMatrix. Die Matrixschreibweise ist matrix(a, b, c, d, e, f).
Rufen Sie die Methode SetAttribute() auf, um das Attribut transform des Elements <svg> mithilfe der Zeichenfolge transformAttribute festzulegen.
Rufen Sie die Methode Save() auf, um das resultierende SVG-Bild in einer lokalen Datei zu speichern.

 1using Aspose.Svg;
 2using System.IO;
 3...
 4
 5	// Load an SVG document
 6    using (var document = new SVGDocument(Path.Combine(DataDir, "shapes.svg")))
 7    {
 8        var svgElement = document.RootElement;
 9
10        // Get the transformation matrix associated with the svgElement
11        var transformationMatrix = svgElement.GetCTM();
12        transformationMatrix = transformationMatrix.Rotate(45);
13
14        // Apply the transformation matrix to the svgElement
15        var transformAttribute = "matrix(" + transformationMatrix.A + "," + transformationMatrix.B + ","
16            + transformationMatrix.C + "," + transformationMatrix.D + "," + transformationMatrix.E + ","
17            + transformationMatrix.F + ")";
18        svgElement.SetAttribute("transform", transformAttribute);
19
20        // Save the document
21        document.Save(Path.Combine(OutputDir, "rotate.svg"));
22    }

Die folgende Abbildung zeigt das Original-SVG (a) und das gedrehte Bild (b).

Text „Die Abbildung zeigt das Original-SVG (a) und das gedrehte Bild (b).“

Siehe auch

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.
Um zu erfahren, wie Sie eine Transformationsmatrix zum Drehen, Skalieren, Übersetzen und Verzerren von SVG-Grafiken verwenden und SVG-Codebeispiele berücksichtigen, lesen Sie bitte den Artikel Transformationsmatrix – SVG-Codebeispiele.
Lesen Sie den Artikel SVG-Transformationen – Grundlagen, SVG-Codebeispiele, um mehr zu erfahren und SVG-Codebeispiele zum Drehen, Skalieren, Verschieben und Neigen von SVG-Grafiken mithilfe des SVG-Transformationsattributs zu erhalten.

SVG-Transformationen SVG-Skalierung