Transformations SVG – Exemples C#

En SVG, les transformations sont utilisées pour modifier la position, la taille, l’orientation et l’inclinaison des éléments SVG dans le canevas SVG. Les objets SVG peuvent être transformés à l’aide des propriétés de l’attribut de transformation: translation, scale, rotate, skewX, skewY et matrix. À l’aide de la bibliothèque Aspose.SVG pour .NET, vous pouvez effectuer ces transformations par programme. Dans ce chapitre, vous trouverez un aperçu général de la façon dont vous pouvez travailler avec des transformations à l’aide d’Aspose.SVG.

Le chapitre actuel décrit les transformations SVG populaires, ainsi que des exemples C# pour les scénarios de transformation les plus courants.

Faire pivoter SVG – Cet article couvre des exemples C# pour la rotation SVG. Cas considérés d’utilisation de la fonction rotate() dans l’attribut transform ainsi que d’une matrice de transformation matrix(a,b,c,d,e,f).
Mise à l’échelle SVG – Cet article présente des exemples C# pour la mise à l’échelle SVG.
Translate SVG – Dans cette section, vous apprendrez à traduire SVG par programmation en C#.

Quelques façons de transformer SVG en C#

Utilisation des propriétés d’attribut transform. Les propriétés d’attribut de transformation en SVG vous permettent de manipuler des éléments à l’aide des fonctions de transformation suivantes:

transform=“translate(tx, ty)” – ici la fonction translate(tx, ty) déplace un élément d’une valeur tx le long de l’axe des x et de ty le long de l’axe des y. Si l’une des valeurs n’est pas spécifiée, la valeur par défaut est zéro.
- rotate(angle, cx, cy) fait pivoter un élément autour d’un point spécifié d’un angle donné.
- scale(sx, sy) spécifie une opération de mise à l’échelle avec des facteurs de mise à l’échelle sx et sy. Si sy n’est pas fourni, il est supposé être égal à sx.
- skewX(angle) et skewY(angle) incline un élément le long de l’axe x ou y d’un angle spécifié.

Utilisation de la matrice de transformation. La matrice de transformation est une manière mathématique de décrire les transformations SVG. La matrice inclut des valeurs de mise à l’échelle, de rotation, d’inclinaison et de translation, offrant plus de flexibilité pour les transformations complexes. La matrice de transformation combine les transformations de translation, d’échelle, de rotation et d’inclinaison.

transform=“matrix(a,b,c,d,e,f)” – Les objets SVG peuvent être modifiés en utilisant la propriété matrice de l’attribut transform. Seules les 6 premières valeurs de la matrice peuvent être spécifiées pour définir la translation, la mise à l’échelle, la rotation et l’inclinaison.

Ces deux méthodes offrent différents niveaux de complexité et de précision, l’attribut transform étant plus facile pour les transformations simples tandis que la matrice de transformation permet un meilleur contrôle sur le processus de transformation. Examinons ces méthodes à l’aide d’exemples C# pour une transformation SVG, telle que la traduction SVG.

Transformation SVG – Fonction Translate()

L’extrait de code C# suivant montre comment créer un élément SVG <rect>, définir ses attributs et appliquer une transformation de traduction à l’aide de l’attribut transform. La transformation déplace le rectangle de 150 unités vers la droite et de 50 unités vers le bas.

Créez une instance de la classe SVGDocument. La propriété RootElement pointe vers l’élément racine <svg> du document.
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(name, value) pour définir les attributs spécifiant la position, la taille, le remplissage et la transformation. L’attribut transform est défini sur l’élément <rect> en utilisant la valeur "translate(150, 50)". Cela applique une transformation de translation qui déplace le rectangle de 150 unités vers la droite et de 50 unités vers le bas.
Pour ajouter rectElement à svgElement, vous pouvez utiliser la méthode AppendChild().
Appelez la méthode Save() pour enregistrer l’image SVG résultante dans un fichier local spécifié par chemin.

 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 = 50;
13		rectElement.Y.BaseVal.Value = 50;
14		rectElement.Width.BaseVal.Value = 100;
15		rectElement.Height.BaseVal.Value = 100;
16		rectElement.SetAttribute("fill", "blue");
17
18		// Apply translate() function to the rectangle
19		rectElement.SetAttribute("transform", "translate(150, 50)");
20
21		// Append the <rect> element to the <svg> element
22		svgElement.AppendChild(rectElement);
23
24		// Save the document
25		document.Save(Path.Combine(OutputDir, "translate.svg"));
26	}

Matrice de transformation SVG

Ici, nous allons examiner l’exemple C# comme celui ci-dessus : créer un élément SVG <rect>, définir ses attributs et implémenter la traduction à l’aide d’une matrice de transformation. Examinons de plus près le code C# pour implémenter la matrice de transformation.

Utilisez la méthode GetCTM() de la classe SVGGraphicsElement qui renvoie la matrice de transformation actuelle (CTM) associée à l’élément <rect>. 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.
Après avoir obtenu le CTM, utilisez la méthode Translate() qui post-multiplie une transformation de traduction sur la matrice actuelle et renvoie la matrice résultante. La méthode Translate(dx, dy) prend deux arguments – dx et dy – représentant respectivement les distances de translation horizontale et verticale.
Construisez un transformAttribute – une représentation sous forme de chaîne d’une matrice de transformation 2D en utilisant les valeurs du transformationMatrix modifié. La notation matricielle est matrix(a, b, c, d, e, f).
Appelez la méthode SetAttribute() pour définir l’attribut transform de l’élément <rect> à l’aide de la chaîne transformAttribute.

 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", "blue");
17		svgElement.AppendChild(rectElement);
18
19		// Get the current transformation matrix associated with the rectElement
20		var transformationMatrix = rectElement.GetCTM();
21		transformationMatrix = transformationMatrix.Translate(150, 50);
22
23		// Apply the transformation matrix to the rectElement
24		var transformAttribute = "matrix(" + transformationMatrix.A + "," + transformationMatrix.B + ","
25			+ transformationMatrix.C + "," + transformationMatrix.D + "," + transformationMatrix.E + ","
26			+ transformationMatrix.F + ")";
27		rectElement.SetAttribute("transform", transformAttribute);
28
29		// Save the document
30		document.Save(Path.Combine(OutputDir, "translation-matrix.svg"));
31	}

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 SVG Transformation 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.

Dégradés SVG Faire pivoter SVG