Faire pivoter SVG – Rotate SVG – Exemples C#

Comment faire pivoter SVG – Code C#

À l’aide de la bibliothèque Aspose.SVG pour .NET, vous pouvez effectuer une transformation de rotation par programme. Cet article couvre des exemples C# pour la rotation SVG. Il considère les cas d’utilisation de la fonction rotate() dans l’attribut transform et la matrice de transformation – matrice(a,b,c,d,e,f).

Fonction Rotate()

L’extrait de code C# suivant montre comment créer un élément SVG <rect>, définir ses attributs et appliquer une transformation à l’aide de la fonction rotate() pour l’attribut transform.

1. Créez une instance de la classe SVGDocument. La propriété RootElement pointe vers l’élément racine <svg> du document.
2. Créez un élément <rect> avec des attributs et ajoutez-le à l’élément <svg>:
   • Vous pouvez utiliser la méthode CreateElementNS() pour créer une instance de la classe SVGRectElement.
   • Appelez la méthode SetAttribute() pour définir les attributs spécifiant la position, la taille, le remplissage et la transformation. Utilisez la fonction rotate() pour l’attribut transform, qui prend l’angle à faire pivoter et les coordonnées du point à faire pivoter. Si les coordonnées ne sont pas spécifiées, alors la rotation sera effectuée autour du point (0, 0) du système de coordonnées initial.
   • Pour ajouter le rectElement à svgElement, vous pouvez utiliser la méthode AppendChild().
3. Appelez la méthode Save() pour enregistrer l’image SVG résultante dans un fichier local spécifié par chemin.

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 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", "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
        string outputPath = "rotate-svg-rect.svg";
        document.Save(Path.Combine(OutputDir, outputPath));
    }

La transformation fait pivoter le rectangle de 45 degrés autour du point (0, 0) du système de coordonnées d’origine puisque les coordonnées du point autour duquel l’élément doit pivoter n’ont pas été transmises à la fonction rotate(). Pour plus de clarté, la figure montre les systèmes de coordonnées avant et après la rotation. Cela montre que la transformation de rotation est effectuée en faisant tourner le système de coordonnées.

Faire pivoter l’élément SVG – Rotation SVG autour du centre

L’extrait de code C# suivant montre comment rechercher un élément SVG requis dans un fichier SVG existant et le faire pivoter. Vous devez suivre quelques étapes:

1. Chargez un fichier SVG source en utilisant l’un des constructeurs SVGDocument().
2. Obtenez l’élément racine <svg> du document.
3. Utilisez la méthode QuerySelector() pour trouver le premier élément rectangle à faire pivoter. La méthode QuerySelector(selector) de la classe Element vous permet d’obtenir le premier élément du document qui correspond au sélecteur spécifié.
4. Définissez un attribut transform avec la valeur rotate(45, 100, 140) pour l’élément rectangle. Cette transformation fait pivoter l’élément d’un angle de 45 degrés (dans le sens des aiguilles d’une montre) autour d’un point spécifié (centre du rectangle sélectionné) avec les coordonnées (100, 140).
5. Appelez la méthode Save() pour enregistrer l’image SVG résultante dans un fichier local.

using Aspose.Svg;
using System.IO;
...
    // Load an SVG document from a file
    var document = new SVGDocument(Path.Combine(DataDir, "shapes.svg"));

    // Get root <svg> element of the document
    var svgElement = document.RootElement;

    // Get <rect> element to rotate
    var rectElement = svgElement.QuerySelector("rect") as SVGRectElement;

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

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

La figure suivante montre le SVG d’origine (a) et l’image avec le premier élément rectangle pivoté (b). Cette transformation a modifié l’apparence du rectangle par rapport aux autres éléments. La position, la largeur et la hauteur du rectangle restent les mêmes, mais il pivotera visuellement autour du point spécifié – dans ce cas, le centre du rectangle.

Remarque: Pour faire pivoter un élément SVG autour de son centre ou d’un autre point, vous devez utiliser la fonction rotate(angle, cx, cy), qui fait pivoter l’élément d’un angle autour du point aux coordonnées (cx, cy). Déterminez (calculez) la position du centre de l’image (ses coordonnées) et effectuez une rotation.

Faire pivoter l’élément SVG – Utilisation de SVG Builder

Ici, nous allons regarder le même exemple: faire pivoter le premier élément <rect> dans le fichier shapes.svg autour de son centre. Cependant, cette fois, nous accomplirons cette tâche en utilisant SVG Builder. L’API SVG Builder offre aux développeurs un outil puissant pour créer et mettre à jour des éléments SVG de manière rationalisée. Dans cet extrait de code:

• la méthode GetElementsByTagName() est utilisée pour récupérer le premier élément <rect> du document SVG.
• Une nouvelle instance de SVGRectElementBuilder est créée pour modifier les propriétés de l’élément <rect> récupéré.
• La méthode Transform() permet d’appliquer une transformation de rotation au rectangle. Dans ce cas, le rectangle pivote de 45 degrés autour du point (100, 140), spécifié comme centre de rotation. Cette transformation modifie l’orientation du rectangle dans le document SVG.
• Après avoir configuré l’élément <rect> avec la transformation souhaitée, la méthode Build() est appelée pour finaliser le processus de construction et appliquer les modifications à l’élément.

using Aspose.Svg.Builder;
using System.Linq;
using System.IO;
...
    // Load an SVG document
    using (var document = new SVGDocument(Path.Combine(DataDir, "shapes.svg")))
    {
        // Find the first <rect> element for rotation
        var 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"));
    }

La méthode Transform() fait partie de l’API SVG Builder, qui permet aux développeurs d’appliquer par programme des transformations aux éléments SVG. Les transformations en SVG permettent aux développeurs de modifier la position, la rotation, l’échelle et l’inclinaison des éléments SVG. La méthode Transform() prend généralement une ou plusieurs fonctions de transformation comme arguments, chacune spécifiant un type particulier de transformation. Ces fonctions incluent:

• Translation Translate() – déplace l’élément le long des axes x et y.
• Rotation Rotate() – fait pivoter l’élément autour d’un point spécifié.
• Mise à l’échelle Scale() – met à l’échelle l’élément le long des axes x et y.
• Inclinaison SkewX() et SkewY() – incline l’élément le long des axes x et y, respectivement.

La méthode Transform() permet d’enchaîner plusieurs fonctions de transformation pour appliquer des transformations plus complexes.

L’article SVG Builder API explore les capacités de l’API Aspose.SVG Builder pour créer et modifier des éléments SVG en C#. L’API SVG Builder est conçue pour rationaliser la création et la mise à jour des éléments SVG en C#. Vous verrez l’efficacité de Fluent Builder Pattern et des mixins dans la manipulation SVG. Vous découvrirez les classes et les méthodes, les constructeurs spécialisés et comment ils simplifient la programmation SVG.

Matrice de transformation SVG – Rotation de la matrice

Ici, nous examinerons l’exemple C# pour faire pivoter une image SVG entière plutôt qu’un seul de ses éléments et implémenter la transformation à l’aide d’une matrice de rotation. Regardons de plus près le code C# pour appliquer la matrice de rotation.

1. Chargez un fichier SVG source en utilisant l’un des constructeurs SVGDocument().
2. Obtenez l’élément racine <svg> du document.

• Remarque: Pour appliquer une transformation à l’ensemble de l’image SVG, vous devez appliquer l’attribut transform à l’élément racine <svg>.

3. Utilisez la méthode GetCTM() de la classe SVGGraphicsElement qui renvoie la matrice de transformation actuelle (CTM) associée à l’élément <svg>. Le CTM représente les transformations cumulatives appliquées à l’élément et comprend des informations sur la translation, la rotation, la mise à l’échelle et l’inclinaison qui peuvent être appliquées à l’élément.
4. Après avoir obtenu le CTM, utilisez la méthode Rotate() qui post-multiplie une transformation de rotation sur la matrice actuelle et renvoie la matrice résultante. La méthode Rotate(angle) ne prend qu’un seul argument: l’angle. Ce paramètre est obligatoire et représente le degré de rotation que vous souhaitez appliquer.
5. Construisez un transformAttribute – une représentation sous forme de chaîne d’une matrice de transformation 2D en utilisant les valeurs de la matrice de transformation modifiée transformationMatrix. La notation matricielle est matrix(a, b, c, d, e, f).
6. Appelez la méthode SetAttribute() pour définir l’attribut transform de l’élément <svg> à l’aide de la chaîne transformAttribute.
7. Appelez la méthode Save() pour enregistrer l’image SVG résultante dans un fichier local.

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

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

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

        // 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, "rotate.svg"));
    }

La figure suivante montre le SVG original (a) et l’image pivotée (b).

Voir également

• Vous pouvez télécharger les exemples complets et les fichiers de données depuis GitHub.
  
• À propos du téléchargement depuis GitHub et de l’exécution d’exemples, vous le découvrirez dans la section Comment exécuter les exemples.
  
• Pour apprendre à utiliser une matrice de transformation pour faire pivoter, mettre à l’échelle, traduire et incliner des graphiques SVG et considérer des exemples de code SVG, veuillez consulter l’article Matrice de transformation – Exemples de code SVG.
  
• Lisez l’article Transformations SVG – Bases, exemples de code SVG pour en savoir plus et obtenir des exemples de code SVG pour faire pivoter, mettre à l’échelle, déplacer et incliner les graphiques SVG à l’aide de l’attribut de transformation SVG.