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

Verwenden von transform-Attributeigenschaften. Mit den Eigenschaften von Transformationsattributen in SVG können Sie Elemente mithilfe der folgenden Transformationsfunktionen bearbeiten:

transform=“translate(tx, ty)” – hier verschiebt die Funktion translate(tx, ty) ein Element um einen tx-Wert entlang der x-Achse und um ty entlang der y-Achse. Wenn einer der Werte nicht angegeben ist, wird er standardmäßig auf Null gesetzt.
- rotate(angle, cx, cy) dreht ein Element um einen angegebenen Punkt um einen bestimmten Winkel.
- scale(sx, sy) gibt eine Skalierungsoperation mit den Skalierungsfaktoren sx und sy an. Wenn sy nicht angegeben ist, wird davon ausgegangen, dass es gleich sx ist.
- skewX(angle) und skewY(angle) neigen ein Element entlang der x- oder y-Achse um einen angegebenen Winkel.

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.

transform=“matrix(a,b,c,d,e,f)” – SVG-Objekte können mithilfe der Matrixeigenschaft des Attributs transform geändert werden. Nur die ersten 6 Werte der Matrix können angegeben werden, um Verschiebung, Skalierung, Drehung und Neigung festzulegen.

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.

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(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.
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 = 50;
13		rectElement.Y.BaseVal.Value = 50;
14		rectElement.Width.BaseVal.Value = 100;
15		rectElement.Height.BaseVal.Value = 100;
16		rectElement.SetAttribute("fill", "blue");
17
18		// Apply translate() function to the rectangle
19		rectElement.SetAttribute("transform", "translate(150, 50)");
20
21		// Append the <rect> element to the <svg> element
22		svgElement.AppendChild(rectElement);
23
24		// Save the document
25		document.Save(Path.Combine(OutputDir, "translate.svg"));
26	}

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.

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.
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.
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).
Rufen Sie die Methode SetAttribute() auf, um das Attribut transform des Elements <rect> mithilfe der Zeichenfolge transformAttribute festzulegen.

 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", "blue");
17		svgElement.AppendChild(rectElement);
18
19		// Get the current transformation matrix associated with the rectElement
20		var transformationMatrix = rectElement.GetCTM();
21		transformationMatrix = transformationMatrix.Translate(150, 50);
22
23		// Apply the transformation matrix to the rectElement
24		var transformAttribute = "matrix(" + transformationMatrix.A + "," + transformationMatrix.B + ","
25			+ transformationMatrix.C + "," + transformationMatrix.D + "," + transformationMatrix.E + ","
26			+ transformationMatrix.F + ")";
27		rectElement.SetAttribute("transform", transformAttribute);
28
29		// Save the document
30		document.Save(Path.Combine(OutputDir, "translation-matrix.svg"));
31	}

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-Transformation, um mehr zu erfahren und SVG-Codebeispiele zum Drehen, Skalieren, Verschieben und Neigen von SVG-Grafiken mithilfe des SVG-Transformationsattributs zu erhalten.

Arbeiten mit SVG-Farben SVG drehen