Mise à l'échelle SVG – SVG Scaling – Exemples C#

Comment mettre à l’échelle SVG – Code C#

À l’aide de la bibliothèque Aspose.SVG pour .NET, vous pouvez effectuer une transformation d’échelle par programme. Cet article a couvert des exemples C# pour la mise à l’échelle SVG. Cas considérés d’utilisation de la fonction scale() dans l’attribut transform ainsi que d’une matrice de transformation matrix(a,b,c,d,e,f).

Fonction Scale()

La mise à l’échelle est une transformation SVG qui agrandit ou réduit un objet à l’aide d’un facteur de mise à l’échelle. Vous devez distinguer la mise à l’échelle uniforme et directionnelle. La fonction de transformation scale(sx, sy) permet de mettre à l’échelle les images le long des axes x et y. La valeur du facteur d’échelle sy est facultative et si elle est omise, elle est supposée être égale à sx.

L’extrait de code C# suivant montre comment créer un élément SVG <circle>, définir ses attributs et appliquer une transformation à l’aide de la fonction scale() 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 <circle> et définissez les attributs requis.
   • Vous pouvez utiliser la méthode CreateElementNS() pour créer une instance de la classe SVGCircleElement.
   • Appelez la méthode SetAttribute() pour définir les attributs spécifiant la position, la taille, le remplissage et la transformation. Utilisez la fonction scale() pour l’attribut transform qui spécifie une transformation de mise à l’échelle. En particulier, scale(2) signifie mettre à l’échelle l’élément <circle> d’un facteur 2 dans les dimensions x et y.
3. Pour ajouter circleElement à svgElement, vous pouvez utiliser la méthode AppendChild().
4. 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 circleElement = (SVGCircleElement)document.CreateElementNS("http://www.w3.org/2000/svg", "circle");
		circleElement.Cx.BaseVal.Value = 100;
		circleElement.Cy.BaseVal.Value = 100;
		circleElement.R.BaseVal.Value = 50;
		circleElement.SetAttribute("fill", "salmon");

		// Apply scaling to the SVG circle
		circleElement.SetAttribute("transform", "scale(2)");

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

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

Matrice de transformation SVG – Scale Matrix

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

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 traduction, la mise à l’échelle, 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 Scale() qui post-multiplie une transformation d’échelle sur la matrice actuelle et renvoie la matrice résultante. La méthode Scale(scaleFactor) ne prend qu’un seul argument: scaleFactor. Ce paramètre est obligatoire et représente la mise à l’échelle sur les axes x et y 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
	string documentPath = Path.Combine(DataDir, "snowflake.svg");

	using (var document = new SVGDocument(documentPath))
	{
		var svgElement = document.RootElement;

		// Get the transformation matrix associated with the svgElement
		var transformationMatrix = svgElement.GetCTM();
		transformationMatrix = transformationMatrix.Scale(0.5F);

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

La figure suivante montre le SVG original (a) et l’image mise à l’échelle avec un facteur d’échelle de 0,5 – l’image réduite (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 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.