SVG-Skalierung – C#-Beispiele

So skalieren Sie SVG-C#-Code

Mit der Aspose.SVG for .NET-Bibliothek können Sie eine Skalierungstransformation programmgesteuert durchführen. In diesem Artikel wurden C#-Beispiele für die SVG-Skalierung behandelt. Berücksichtigte Fälle der Verwendung der Funktion scale() im Attribut transform sowie einer Transformationsmatrix matrix(a,b,c,d,e,f).

Scale()-Funktion

Skalierung ist eine SVG-Transformation, die ein Objekt mithilfe eines Skalierungsfaktors vergrößert oder verkleinert. Man muss zwischen gleichmäßiger und gerichteter Skalierung unterscheiden. Die Transformationsfunktion scale(sx, sy) ermöglicht die Skalierung von Bildern entlang der x- und y-Achse. Der Wert des Skalierungsfaktors sy ist optional, und wenn er weggelassen wird, wird davon ausgegangen, dass er gleich sx ist.

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

1. Erstellen Sie eine Instanz der Klasse SVGDocument. Die Eigenschaft RootElement verweist auf das Stammelement <svg> des Dokuments.
2. Erstellen Sie ein <circle>-Element und legen Sie die erforderlichen Attribute fest.
   • Sie können die Methode CreateElementNS() verwenden, um eine Instanz der Klasse SVGCircleElement zu erstellen.
   • Rufen Sie die Methode SetAttribute() auf, um Attribute festzulegen, die Position, Größe, Füllung und Transformation angeben. Verwenden Sie die Funktion scale() für das Attribut transform, das eine Skalierungstransformation angibt. Insbesondere bedeutet scale(2), das <circle>-Element sowohl in der x- als auch in der y-Dimension um den Faktor 2 zu skalieren.
3. Um das circleElement 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.

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

    // Create a new SVG document
	using (var document = new SVGDocument())
	{
		var svgElement = document.RootElement;

		// Create a rect element and set its attributes
		var circleElement = (SVGCircleElement)document.CreateElementNS("http://www.w3.org/2000/svg", "circle");
		circleElement.Cx.BaseVal.Value = 100;
		circleElement.Cy.BaseVal.Value = 100;
		circleElement.R.BaseVal.Value = 50;
		circleElement.SetAttribute("fill", "salmon");

		// Apply scaling to the SVG circle
		circleElement.SetAttribute("transform", "scale(2)");

		// Append the rect element to the SVG
		svgElement.AppendChild(circleElement);

		// Save the document
		document.Save(Path.Combine(OutputDir, "scale-circle.svg"));
    }

SVG-Transformationsmatrix – Skalierungsmatrix

Hier sehen wir uns das C#-Beispiel für die Skalierung eines gesamten SVG-Bildes anstelle eines einzelnen Elements an und implementieren die Transformation mithilfe einer Skalierungsmatrix. Schauen wir uns den C#-Code zum Anwenden der Skalenmatrix genauer an.

1. Laden Sie eine SVG-Quelldatei mit einem der SVGDocument()-Konstruktoren.
2. 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.

3. 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 Übersetzung, Skalierung, Skalierung und Verzerrung, die auf das Element angewendet werden können.
4. Nachdem Sie das CTM erhalten haben, verwenden Sie die Methode Scale(), die eine Skalentransformation auf der aktuellen Matrix nachmultipliziert und die resultierende Matrix zurückgibt. Die Scale(scaleFactor)-Methode benötigt nur ein Argument – ​scaleFactor. Dieser Parameter ist obligatorisch und stellt die Skalierung sowohl auf der X- als auch auf der Y-Achse dar, die Sie anwenden möchten.
5. 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).
6. Rufen Sie die Methode SetAttribute() auf, um das Attribut transform des Elements <svg> mithilfe der Zeichenfolge transformAttribute festzulegen.
7. Rufen Sie die Methode Save() auf, um das resultierende SVG-Bild in einer lokalen Datei zu speichern.

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

	// Load an SVG document
	string documentPath = Path.Combine(DataDir, "snowflake.svg");

	using (var document = new SVGDocument(documentPath))
	{
		var svgElement = document.RootElement;

		// Get the transformation matrix associated with the svgElement
		var transformationMatrix = svgElement.GetCTM();
		transformationMatrix = transformationMatrix.Scale(0.5F);

		// Apply the transformation matrix to the svgElement
		var transformAttribute = "matrix(" + transformationMatrix.A + "," + transformationMatrix.B + ","
			+ transformationMatrix.C + "," + transformationMatrix.D + "," + transformationMatrix.E + ","
			+ transformationMatrix.F + ")";
		svgElement.SetAttribute("transform", transformAttribute);

		// Save the document
		document.Save(Path.Combine(OutputDir, "scale-svg.svg"));
	}

Die folgende Abbildung zeigt das Original-SVG (a) und das skalierte Bild mit einem Skalierungsfaktor von 0,5 – das verkleinerte 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-Transformation, um mehr zu erfahren und SVG-Codebeispiele zum Drehen, Skalieren, Verschieben und Neigen von SVG-Grafiken mithilfe des SVG-Transformationsattributs zu erhalten.