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.

1. Cree una instancia de la clase SVGDocument. La propiedad RootElement apunta al elemento raíz <svg> del documento.
2. 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().
3. 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;

// Rotate an SVG element using the transform attribute programmatically with Aspose.SVG

// Set SVG Namespace URL
string SvgNamespace = "http://www.w3.org/2000/svg";

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

    // Create a <rect> element and set its attributes
    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 150;
    rectElement.Y.BaseVal.Value = 50;
    rectElement.Width.BaseVal.Value = 100;
    rectElement.Height.BaseVal.Value = 100;
    rectElement.SetAttribute("fill", "purple");

    // Apply rotate() function to the SVG
    rectElement.SetAttribute("transform", "rotate(45)");

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

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

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.

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:

1. Cargue un archivo SVG fuente usando uno de los constructores SVGDocument().
2. Obtenga el elemento raíz <svg> del documento.
3. 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.
4. 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).
5. Llame al método Save() para guardar la imagen SVG resultante en un archivo local.

using Aspose.Svg;
using System.IO;

// Rotate a single selected element in an SVG document using C#

// Load an SVG document from a file
SVGDocument document = new SVGDocument(Path.Combine(DataDir, "shapes.svg"));

// Get the root SVG element of the document
SVGSVGElement svgElement = document.RootElement;

// Get the fist <rect> element for rotation
SVGRectElement rectElement = svgElement.QuerySelector("rect") as SVGRectElement;

// Set a new "transform" attribute with rotation value for the rectangle element
rectElement.SetAttribute("transform", "rotate(45, 100, 140)");

// Save the document
string outputPath = "rotate-element.svg";
document.Save(Path.Combine(OutputDir, outputPath));

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).

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.

using Aspose.Svg.Builder;
using System.Linq;
using System.IO;

// Rotate a single selected element in an SVG document using SVG Builder API

// Load an SVG document
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "shapes.svg")))
{
    // Find the first <rect> element for rotation
    SVGRectElement rect = document.GetElementsByTagName("rect").First() as SVGRectElement;

    // Rotate the first <rect> element around its center using the SVGRectElementBuilder
    new SVGRectElementBuilder()
        .Transform(t => t.Rotate(45, 100, 140))
        .Build(rect);

    // Save the document
    document.Save(Path.Combine(OutputDir, "rotate-element-using-builder.svg"));
}

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.

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 traslación, rotación, escala y sesgo que se pueden aplicar al elemento.
4. 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.
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.Builder;
using System.Linq;
using System.IO;

// Rotate an entire SVG document using a transformation matrix programmatically in C#

// Load an SVG document
string documentPath = Path.Combine(DataDir, "shapes.svg");
using (SVGDocument document = new SVGDocument(documentPath))
{
    SVGSVGElement svgElement = document.RootElement;

    // Get the transformation matrix associated with the svgElement
    SVGMatrix transformationMatrix = svgElement.GetCTM();
    transformationMatrix = transformationMatrix.Rotate(45);

    // Apply the transformation matrix to the svgElement
    string 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, "rotate-matrix.svg"));
}

La siguiente 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.