Transformaciones SVG – Rotar, escalar y trasladar archivos SVG

En SVG, las transformaciones se utilizan para modificar la posición, el tamaño, la orientación y la inclinación de los elementos SVG dentro del lienzo SVG. Los objetos SVG se pueden transformar utilizando las propiedades del atributo de transformación: traducir, escalar, rotar, skewX, skewY y matriz. Usando Aspose.SVG para la biblioteca .NET, puede realizar estas transformaciones mediante programación. En este capítulo se ofrece una descripción general de cómo podría trabajar con transformaciones utilizando Aspose.SVG.

El capítulo actual describe transformaciones SVG populares, así como ejemplos de C# para los escenarios de transformación más comunes.

• Rotar SVG: este artículo cubrió ejemplos de C# para la rotación de SVG. Casos considerados de uso de la función rotate() en el atributo transform así como de una matriz de transformación matrix(a,b,c,d,e,f).
• Escalado SVG: este artículo ha cubierto ejemplos de C# para el escalado SVG.
• Traducir SVG: en esta sección, aprenderá cómo traducir SVG mediante programación en C#.

Algunas formas de transformar SVG en C#

1. Usando las propiedades del atributo transform. Las propiedades de atributos de transformación en SVG le permiten manipular elementos utilizando las siguientes funciones de transformación:

• transform=“translate(tx, ty)” – aquí la función translate(tx, ty) mueve un elemento en un valor tx a lo largo del eje x y en ty a lo largo del eje y. Si uno de los valores no se especifica, el valor predeterminado es cero.
  • rotate(angle, cx, cy) gira un elemento alrededor de un punto específico en un ángulo determinado.
  • scale(sx, sy) especifica una operación de escala con factores de escala sx y sy. Si no se proporciona sy, se supone que es igual a sx.
  • skewX(angle) y skewY(angle) inclinan un elemento a lo largo del eje xoy en un ángulo específico.

2. Usando la Matriz de Transformación. La matriz de transformación es una forma matemática de describir transformaciones SVG. La matriz incluye valores de escala, rotación, sesgo y traslación, lo que proporciona más flexibilidad para transformaciones complejas. La matriz de transformación combina transformaciones de traslación, escala, rotación y sesgo.

• transform=“matrix(a,b,c,d,e,f)” – Los objetos SVG se pueden modificar utilizando la propiedad de matriz del atributo transform. Solo se pueden especificar los primeros 6 valores de la matriz para establecer la traslación, el escalado, la rotación y la inclinación.

Estas dos formas ofrecen diferentes niveles de complejidad y precisión, siendo el atributo transform más fácil para transformaciones simples, mientras que la matriz de transformación permite un mayor control sobre el proceso de transformación. Veamos estos métodos usando ejemplos de C# para una transformación SVG, como la traducción SVG.

Transformación SVG – Función Translate()

El siguiente fragmento de código C# demuestra cómo crear un elemento SVG <rect>, establecer sus atributos y aplicar una transformación de traducción utilizando el atributo transform. La transformación mueve el rectángulo 150 unidades hacia la derecha y 50 unidades hacia abajo.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(name, value) para establecer atributos que especifiquen la posición, el tamaño, el relleno y la transformación. El atributo transform se establece en el elemento <rect> usando el valor "translate(150, 50)". Esto aplica una transformación de traslación que mueve el rectángulo 150 unidades hacia la derecha y 50 unidades hacia abajo. 3. Para agregar rectElement 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;

// Translate an SVG rectangle using the transform attribute in C#

// 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("http://www.w3.org/2000/svg", "rect");
    rectElement.X.BaseVal.Value = 50;
    rectElement.Y.BaseVal.Value = 50;
    rectElement.Width.BaseVal.Value = 100;
    rectElement.Height.BaseVal.Value = 100;
    rectElement.SetAttribute("fill", "blue");

    // Apply translate() function to the rectangle
    rectElement.SetAttribute("transform", "translate(150, 50)");

    // Append the <rect> element to the <svg> element
    svgElement.AppendChild(rectElement);

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

Matriz de transformación SVG

Aquí, veremos el ejemplo de C# como el anterior: crearemos un elemento SVG <rect>, estableceremos sus atributos e implementaremos la traducción usando una matriz de transformación. Echemos un vistazo más de cerca al código C# para implementar la matriz de transformación.

1. Utilice el método GetCTM() de la clase SVGGraphicsElement que devuelve la matriz de transformación actual (CTM) asociada con el elemento <rect>. 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.
2. Después de obtener el CTM, utilice el método Translate() que multiplica posteriormente una transformación de traducción en la matriz actual y devuelve la matriz resultante. El método Translate(dx, dy) toma dos argumentos, dx y dy, que representan distancias de traslación horizontal y vertical, respectivamente.
3. Construya un transformAttribute: una representación de cadena de una matriz de transformación 2D utilizando los valores de la transformationMatrix modificada. La notación matricial es matrix(a, b, c, d, e, f).
4. Llame al método SetAttribute() para establecer el atributo transform del elemento <rect> usando la cadena transformAttribute.

using Aspose.Svg;
using System.IO;

// Translate an SVG element using a transformation matrix in C#

// 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("http://www.w3.org/2000/svg", "rect");
    rectElement.X.BaseVal.Value = 150;
    rectElement.Y.BaseVal.Value = 50;
    rectElement.Width.BaseVal.Value = 100;
    rectElement.Height.BaseVal.Value = 100;
    rectElement.SetAttribute("fill", "blue");
    svgElement.AppendChild(rectElement);

    // Get the current transformation matrix associated with the rectElement
    SVGMatrix transformationMatrix = rectElement.GetCTM();
    transformationMatrix = transformationMatrix.Translate(150, 50);

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

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

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 utilizando el atributo de transformación SVG.