Rotar SVG – Ejemplos de C#

Cómo rotar SVG – Código C#

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

Función Rotate()

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

Cree una instancia de la clase SVGDocument. La propiedad RootElement apunta al elemento raíz <svg> del documento.
Cree un elemento <rect> con atributos y agréguelo al elemento <svg>:
- Puede utilizar el método CreateElementNS() para crear una instancia de la clase SVGRectElement.
- 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 rotate() para el atributo transform, que toma el ángulo que se va a rotar y las coordenadas del punto alrededor del cual se va a rotar. Si no se especifican coordenadas, la rotación se realizará alrededor del punto (0, 0) del sistema de coordenadas inicial.
- Para agregar rectElement a svgElement, puedes usar el método AppendChild().
Llame al método Save() para guardar la imagen SVG resultante en un archivo local especificado por la ruta.

 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    }

La transformación gira el rectángulo 45 grados alrededor del punto (0, 0) del sistema de coordenadas original, ya que las coordenadas del punto alrededor del cual se debe girar el elemento no se pasaron a la función rotate(). Para mayor claridad, la Figura muestra los sistemas de coordenadas antes y después de la rotación. Esto ilustra que la transformación de rotación se realiza girando el sistema de coordenadas.

Texto “Rectángulo original (a) e imagen con el rectángulo girado (b)”.

Girar elemento SVG – SVG Girar alrededor del centro

El siguiente fragmento de código C# muestra cómo encontrar un elemento SVG requerido en un archivo SVG existente y rotarlo. Debes seguir algunos pasos:

Cargue un archivo SVG fuente usando uno de los constructores SVGDocument().
Obtenga el elemento raíz <svg> del documento.
Utilice el método QuerySelector() para encontrar el primer elemento del rectángulo que desea rotar. El método QuerySelector(selector) de la clase Element le permite obtener el primer elemento dentro del documento que coincide con el selector especificado.
Establezca un atributo transformar con el valor rotate(45, 100, 140) para el elemento rectángulo. Esta transformación gira el elemento en un ángulo de 45 grados (en el sentido de las agujas del reloj) alrededor de un punto específico (centro del rectángulo seleccionado) con coordenadas (100, 140).
Llame al método Save() para guardar la imagen SVG resultante en un archivo local.

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

La siguiente figura muestra el SVG original (a) y la imagen con el primer elemento rectangular girado (b). Esta transformación cambió la apariencia del rectángulo en relación con otros elementos. La posición, el ancho y el alto del rectángulo siguen siendo los mismos, pero se rotará visualmente alrededor del punto especificado (en este caso, el centro del rectángulo).

Texto “Imagen svg original (a) e imagen con el primer elemento rectangular girado (b)”.

Nota: Para rotar un elemento SVG alrededor de su centro o algún otro punto, debe usar la función rotate(angle, cx, cy), que rota el elemento en un ángulo alrededor del punto con coordenadas (cx , cy). Determine (calcule) la posición del centro de la imagen (sus coordenadas) y realice la rotación.

Girar elemento SVG: uso de SVG Builder

Aquí, veremos el mismo ejemplo: rotar el primer elemento <rect> dentro del archivo shapes.svg alrededor de su centro. Sin embargo, esta vez realizaremos esta tarea utilizando SVG Builder. SVG Builder API ofrece a los desarrolladores una poderosa herramienta para crear y actualizar elementos SVG de manera simplificada. En este fragmento de código:

el método GetElementsByTagName() se utiliza para recuperar el primer elemento <rect> del documento SVG.
Se crea una nueva instancia SVGRectElementBuilder para modificar las propiedades del elemento <rect> recuperado.
El método Transform() se utiliza para aplicar una transformación de rotación al rectángulo. En este caso, el rectángulo se gira 45 grados alrededor del punto (100, 140), especificado como centro de rotación. Esta transformación altera la orientación del rectángulo dentro del documento SVG.
Luego de configurar el elemento <rect> con la transformación deseada, se llama al método Build() para finalizar el proceso de construcción y aplicar las modificaciones al elemento.

 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    }

El método Transform() es parte de la API SVG Builder, que permite a los desarrolladores aplicar transformaciones mediante programación a elementos SVG. Las transformaciones en SVG permiten a los desarrolladores modificar la posición, rotación, escala e inclinación de los elementos SVG. El método Transform() normalmente toma una o más funciones de transformación como argumentos, cada una de las cuales especifica un tipo particular de transformación. Estas funciones incluyen:

Traducción Translate() – mueve el elemento a lo largo de los ejes xey.
Rotación Rotate() – rota el elemento alrededor de un punto específico.
Escalado Scale(): escala el elemento a lo largo de los ejes xey.
Sesgar SkewX() y SkewY() – sesga el elemento a lo largo de los ejes x e y, respectivamente.

El método Transform() permite encadenar múltiples funciones de transformación para aplicar transformaciones más complejas.

El artículo SVG Builder API explora las capacidades de Aspose.SVG Builder API para crear y modificar elementos SVG en C#. La API SVG Builder está diseñada para agilizar la creación y actualización de elementos SVG en C#. Verá la eficiencia de Fluent Builder Pattern y mixins en la manipulación de SVG. Aprenderá sobre las clases y métodos, los constructores especializados y cómo simplifican la programación SVG.

Matriz de transformación SVG - Rotar matriz

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

Cargue un archivo SVG fuente usando uno de los constructores SVGDocument().
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>.

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 traslación, rotación, escala y sesgo que se pueden aplicar al elemento.
Después de obtener el CTM, utilice el método Rotate() que multiplica posteriormente una transformación de rotación en la matriz actual y devuelve la matriz resultante. El método Rotate(angle) toma sólo un argumento: el ángulo. Este parámetro es obligatorio y representa la cantidad de rotación que desea aplicar.
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).
Llame al método SetAttribute() para establecer el atributo transform del elemento <svg> usando la cadena transformAttribute.
Llame al método Save() para guardar la imagen SVG resultante en un archivo local.

 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    }

La siguiente figura muestra el SVG original (a) y la imagen rotada (b).

Texto “La figura muestra el SVG original (a) y la imagen rotada (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.

Transformaciones SVG Escalado SVG