Escalado SVG – ejemplos de C#

Cómo escalar SVG – Código C#

Usando Aspose.SVG for .NET, puede realizar una transformación de escala mediante programación. Este artículo cubre ejemplos de C# para escalado SVG. Considera casos de uso de la función scale() en el atributo transform así como una matriz de transformación – matrix(a,b,c,d,e,f).

Función Scale()

El escalado es una transformación SVG que amplía o reduce un objeto utilizando un factor de escala. Hay que distinguir el escalado uniforme y direccional. La función de transformación scale(sx, sy) permite escalar imágenes a lo largo de los ejes x e y. El valor del factor de escala sy es opcional y, si se omite, se supone que es igual a sx.

El siguiente fragmento de código C# demuestra cómo crear un elemento SVG <circle>, establecer sus atributos y aplicar una transformación usando la función scale() para el atributo transform.

1. Cree una instancia de la clase SVGDocument. La propiedad RootElement apunta al elemento raíz <svg> del documento.
2. Cree un elemento <circle> y establezca los atributos requeridos.
   • Puede utilizar el método CreateElementNS() para crear una instancia de la clase SVGCircleElement.
   • Llame al método SetAttribute() para establecer atributos que especifiquen la posición, el tamaño, el relleno y la transformación. Utilice la función scale() para el atributo transform que especifica una transformación de escala. En particular, scale(2) significa escalar el elemento <circle> por un factor de 2 en las dimensiones x e y.
3. Para agregar circleElement a svgElement, puede usar el método AppendChild().
4. Llame al método Save() para guardar la imagen SVG resultante en un archivo local especificado por la ruta.

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"));
    }

Matriz de transformación SVG - Matriz de escala

Aquí, veremos el ejemplo de C# para escalar una imagen SVG completa en lugar de un solo elemento e implementaremos la transformación usando una matriz de escala. Miremos más de cerca el código C# para aplicar la matriz de escala.

1. Cargue un archivo SVG fuente usando uno de los constructores SVGDocument().
2. Obtenga el elemento raíz <svg> del documento.

• Nota: Para aplicar cualquier transformación a toda la imagen SVG, debe aplicar el atributo transform al elemento raíz <svg>.

3. Utilice el método GetCTM() de la clase SVGGraphicsElement que devuelve la matriz de transformación actual (CTM) asociada con el elemento <svg>. El CTM representa las transformaciones acumulativas aplicadas al elemento e incluye información sobre traducción, escala, escala y sesgo que se pueden aplicar al elemento.
4. Después de obtener el CTM, utilice el método Scale() que multiplica posteriormente una transformación de escala en la matriz actual y devuelve la matriz resultante. El método Scale(scaleFactor) toma solo un argumento: scaleFactor. Este parámetro es obligatorio y representa la escala en los ejes x e y que desea aplicar.
5. Construya un transformAttribute: una representación de cadena de una matriz de transformación 2D utilizando los valores de la matriz de transformación modificada transformationMatrix. La notación matricial es matrix(a, b, c, d, e, f).
6. Llame al método SetAttribute() para establecer el atributo transform del elemento <svg> usando la cadena transformAttribute.
7. Llame al método Save() para guardar la imagen SVG resultante en un archivo local.

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"));
	}

La siguiente figura muestra el SVG original (a) y la imagen escalada con un factor de escala de 0,5: la imagen reducida (b).

Ver también

• Puede descargar los ejemplos completos y los archivos de datos desde GitHub.
  
  
• Encontrará información sobre la descarga desde GitHub y la ejecución de ejemplos en la sección Cómo ejecutar los ejemplos.
  
  
• Para aprender a utilizar una matriz de transformación para rotar, escalar, traducir y sesgar gráficos SVG y considerar ejemplos de código SVG, consulte el artículo Matriz de transformación: ejemplos de código SVG.
  
  
• Lea el artículo Transformación SVG para obtener más información y obtener ejemplos de código SVG para rotar, escalar, mover y sesgar gráficos SVG usando el atributo de transformación SVG.