Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
Paint Builder – Configurer SVG Fill et Stroke en C#
Contents
[
Hide
Show
]Qu’est-ce que PaintBuilder?
Aspose.SVG Builder API permet de configurer les propriétés SVG fill et stroke par programmation avec une syntaxe fluide. La classe
PaintBuilder simplifie la création de valeurs paint SVG, notamment les couleurs solides et les références à des paint servers comme les patterns et gradients.
La configuration paint SVG est utilisée pour les arrière-plans réutilisables, textures décoratives, styles de graphiques, remplissages d’icônes et effets vectoriels. Les builders imbriqués et les méthodes chaînées rendent la génération SVG plus lisible et maintenable.
Cet article explique comment utiliser PaintBuilder, une classe builder pour créer des valeurs paint pour les éléments SVG. Elle sert à définir les valeurs des attributs stroke ou fill lors de l’application de couleurs, patterns ou gradients.
PaintBuilder fait partie de l’API Aspose.SVG Builder et configure les valeurs SVG fill et stroke. Il prend en charge plusieurs valeurs paint SVG:
- couleurs solides
- références à des SVG patterns
- références à des SVG gradients
- autres références à des paint servers
L’API Builder utilise un modèle de configuration fluide qui simplifie la création et le style des éléments SVG.
Créer des SVG Pattern Fills
Les SVG patterns permettent de remplir des formes avec des éléments graphiques répétés au lieu de couleurs solides. Ils sont définis une fois et réutilisables dans plusieurs éléments SVG. Dans l’exemple suivant,
PaintServerId() de PaintBuilder définit la valeur fill comme une référence à un paint server par son Id.
1using Aspose.Svg.Builder;
2using System.Drawing;
3using System.IO; 1// Create SVG pattern with polygons and apply as fill to rectangle using C# Builder API
2
3using (SVGDocument document = new SVGDocument())
4{
5 SVGSVGElement svg = new SVGSVGElementBuilder()
6 .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
7 .ViewBox(0, 0, 400, 400)
8 .AddG(g => g
9 .AddPattern(p => p.Id("stars")
10 .ViewBox(0, 0, 20, 20)
11 .Width(5, LengthType.Percentage)
12 .Height(5, LengthType.Percentage)
13 .PatternUnits(CoordinateUnits.UserSpaceOnUse)
14 .AddPolygon(points: new double[] { 5, 0, 7, 3, 10, 5, 7, 7, 5, 10, 3, 7, 0, 5, 3, 3 }, fill: Color.Teal)
15 .AddPolygon(points: new double[] { 15, 0, 17, 3, 20, 5, 17, 7, 15, 10, 13, 7, 10, 5, 13, 3 }, fill: Color.DarkRed)
16 .AddPolygon(points: new double[] { 15, 10, 17, 13, 20, 15, 17, 17, 15, 20, 13, 17, 10, 15, 13, 13 }, fill: Color.DarkBlue)
17 )
18 .AddRect(r => r.Rect(20, 40, 440, 80).Fill(pt => pt.PaintServerId("stars")))
19 )
20 .Build(document.FirstChild as SVGSVGElement);
21 document.Save(Path.Combine(OutputDir, "pattern-stars.svg"));
22}Dans cet exemple, un pattern est d’abord défini avec
AddPattern(), où des polygones colorés forment un remplissage complexe. Le pattern reçoit l’identifiant stars, puis il est appliqué à un rectangle avec Fill() et PaintServerId("stars").
Appliquer des Patterns aux formes SVG
Les remplissages par patterns peuvent être appliqués à des rectangles, cercles, chemins, polygones et éléments texte. Tout élément SVG prenant en charge fill peut utiliser une référence à un paint server créée avec PaintBuilder.
L’exemple C# suivant montre comment créer des SVG patterns et les appliquer à des formes dans le document. Le code illustre l’approche « builder dans un builder », qui utilise plusieurs classes de builders, où un builder est imbriqué dans un autre pour faciliter la construction d’objets или de structures complexes et offrir une approche modulaire et structurée de la création de documents SVG :
1using Aspose.Svg.Builder;
2using System.Drawing;
3using System.IO; 1// Create SVG patterns with reusable elements and apply them to circles using C# Builder API
2
3using (SVGDocument document = new SVGDocument())
4{
5 SVGSVGElement svg = new SVGSVGElementBuilder()
6 .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
7 .ViewBox(0, 0, 600, 600)
8 .AddG(g => g
9 .FontFamily("Arial")
10 .FontSize(10)
11 .AddPattern(p => p.Id("Pat3a")
12 .Rect(0, 0, 20, 20)
13 .PatternUnits(CoordinateUnits.UserSpaceOnUse)
14 .AddRect(r => r.Rect(0, 0, 10, 10).Fill(Color.LightSlateGray))
15 .AddRect(r => r.Rect(10, 0, 10, 10).Fill(Color.Teal))
16 .AddRect(r => r.Rect(0, 10, 10, 10).Fill(Color.DarkRed))
17 .AddRect(r => r.Rect(10, 10, 10, 10).Fill(Color.Gold))
18 )
19 .AddPattern(p => p.Id("Pat3b")
20 .Href("#Pat3a")
21 .Width(23).Height(23)
22 )
23 .AddPattern(p => p.Id("Pat3c")
24 .Href("#Pat3a")
25 .Width(15).Height(15)
26 )
27 .AddCircle(circle => circle.Cx(90).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3a")))
28 .AddText(t => t.X(55).Y(50)
29 .AddContent("Pattern #Pat3a")
30 )
31 .AddCircle(circle => circle.Cx(240).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3b")))
32 .AddText(t => t.X(205).Y(50)
33 .AddContent("Pattern #Pat3b")
34 )
35 .AddCircle(circle => circle.Cx(390).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3c")))
36 .AddText(t => t.X(355).Y(50)
37 .AddContent("Pattern #Pat3c")
38 )
39 )
40 .Build(document.FirstChild as SVGSVGElement);
41 document.Save(Path.Combine(OutputDir, "patterns.svg"));
42}
Fonctionnement du Pattern
L’élément <pattern> définit une tuile réutilisable qui se répète sur la forme remplie. Dans cet exemple:
Width()etHeight()définissent la taille de la tuile répétée;PatternUnits(UserSpaceOnUse)utilise des coordonnées fixes pour la répétition;- l’élément circle définit le contenu graphique répété dans le pattern.
Le pattern peut être réutilisé pour plusieurs éléments SVG en référençant le même ID. Des dimensions plus petites créent des répétitions plus denses; des valeurs plus grandes augmentent l’espacement.
Dans l’exemple, trois patterns différents, nommés Pat3a, Pat3b et Pat3c, sont ajoutés au document SVG.
- Pour Pat3a, un pattern est défini à l’aide de la méthode AddPattern() à l’intérieur de la méthode AddG(). Dans ce pattern, quatre rectangles sont ajoutés pour définir les différentes sections du pattern dans différentes couleurs au sein d’un espace de 20x20 unités — une tuile.
- Pat3b et Pat3c sont définis comme des références à Pat3a, avec des tailles de tuiles différentes spécifiées à l’aide des méthodes Width() et Height().
La hauteur et la largeur d’une tuile dans un élément de pattern définissent la taille de l’unité de pattern répétée dans le document SVG. Cette taille détermine l’aspect du pattern lorsqu’il est appliqué à des formes ou à des éléments. Dans le pattern Pat3b, l’augmentation de la hauteur et de la largeur de la tuile agrandit l’unité de pattern, ce qui entraîne des zones non remplies (transparentes). Dans le pattern Pat3c, la réduction de la hauteur et de la largeur de la tuile rend le pattern plus dense, créant un effet visuel différent.
Ainsi, l’ajustement de la hauteur et de la largeur de la tuile dans un élément SVG <pattern> vous permet de contrôler la densité et la répétition du pattern dans le document SVG et permet de créer divers effets visuels.
Créer des Linear Gradient Fills
Aspose.SVG Builder API permet de créer des SVG linear gradients réutilisables et de les appliquer aux formes SVG. Les gradients sont souvent utilisés pour les arrière-plans, graphiques, boutons et éléments décoratifs.
1using Aspose.Svg.Builder;
2using System.Drawing;
3using System.IO;
4
5using (SVGDocument document = new SVGDocument())
6{
7 SVGSVGElement svg = new SVGSVGElementBuilder()
8 .Width(400).Height(200)
9 .ViewBox(0, 0, 400, 200)
10 .AddDefs(defs => defs
11 .AddLinearGradient(gradient => gradient
12 .Id("gradientFill")
13 .X1(0, LengthType.Percentage).Y1(0, LengthType.Percentage)
14 .X2(100, LengthType.Percentage).Y2(0, LengthType.Percentage)
15 .AddStop(stop => stop
16 .Offset(0, StopUnitType.Percentage)
17 .Attribute("stop-color", "gold"))
18 .AddStop(stop => stop
19 .Offset(100, StopUnitType.Percentage)
20 .Attribute("stop-color", "teal"))))
21 .AddRect(rect => rect
22 .Rect(20, 20, 360, 160)
23 .Fill(paint => paint.PaintServerId("gradientFill")))
24 .Build(document.FirstChild as SVGSVGElement);
25
26 document.Save(Path.Combine(OutputDir, "linear-gradient-fill.svg"));
27}Fonctionnement du Gradient
L’exemple crée une définition SVG <linearGradient> réutilisable dans <defs> et l’applique au remplissage d’un rectangle.
AddLinearGradient()définit la direction et l’identifiant du gradient;AddStop()définit les points de transition de couleur;PaintServerId("gradientFill")applique le paint server gradient au remplissage du rectangle et produit une référenceurl(#gradientFill)dans la sortie SVG;- le gradient peut être réutilisé dans plusieurs éléments SVG.
Erreurs courantes et corrections
| Problème | Cause | Correction |
|---|---|---|
| Le pattern n’est pas visible | ID de pattern incorrect | Vérifier que PaintServerId() correspond à Id() |
| Le pattern semble étiré | Tuile trop grande | Ajuster Width() et Height() du pattern |
| Le pattern ne se répète pas correctement | Valeur PatternUnits incorrecte | Utiliser UserSpaceOnUse pour des tuiles fixes |
| Le fill n’est pas appliqué | Pattern défini hors de la portée accessible | Définir les patterns avant de les appliquer |
FAQ
1. Qu’est-ce qu’un paint server en SVG?
Un paint server est une ressource SVG fournissant des valeurs fill ou stroke. Les plus courants sont les patterns et gradients référencés avec url(#id).
2. Puis-je réutiliser le même SVG pattern pour plusieurs formes?
Oui. Un SVG pattern peut être réutilisé par plusieurs éléments avec le même ID via PaintServerId().
3. Quelle est la différence entre UserSpaceOnUse et ObjectBoundingBox?
UserSpaceOnUse utilise des coordonnées fixes, tandis qu’ObjectBoundingBox adapte le pattern à la taille de l’élément cible.
4. Pourquoi mon SVG pattern semble-t-il étiré?
Cela arrive souvent si la tuile du pattern est trop grande ou si le système de coordonnées ne correspond pas à l’élément cible.
5. Puis-je appliquer des SVG patterns au texte?
Oui. Les éléments texte SVG prennent en charge fill et peuvent utiliser des patterns comme les formes.
6. PaintBuilder prend-il en charge les SVG gradients?
Oui. PaintBuilder prend en charge les références à des paint servers pour configurer des gradients SVG par programmation.
Ressources connexes
- L’article SVG Builder API explique comment créer et manipuler des éléments SVG par programmation en C# avec Aspose.SVG Builder API. Découvrez comment les builders fluides simplifient la génération SVG et améliorent la lisibilité du code dans les applications .NET.
- L’article Element Builders présente les builders d’éléments SVG dans Aspose.SVG for .NET. Découvrez comment les classes de builders spécialisées simplifient la création de formes, de graphiques et de structures de documents SVG en C#.
- L’article Path Builder explique comment créer des chemins SVG par programmation en C#. Découvrez comment la classe PathBuilder simplifie la génération de formes complexes, de courbes et de graphiques vectoriels SVG à l’aide d’une syntaxe fluide.
- L’article Rule Builder explique comment créer des règles de style CSS pour les documents SVG en C# à l’aide de la classe RuleBuilder. Découvrez comment configurer les styles SVG par programmation dans les applications .NET.
- L’article SVG Filters explique comment créer des effets de filtre SVG tels que le flou gaussien, les ombres portées, l’éclairage et la saturation en C#. Découvrez comment appliquer des filtres SVG par programmation avec Aspose.SVG for .NET.
- L’article SVG Gradients explique comment créer des gradients SVG linéaires et radiaux en C#. Découvrez comment définir des remplissages de gradients SVG réutilisables en XML et les générer par programmation.
- La section Bases du dessin SVG couvre les principes fondamentaux de la création de graphiques SVG, notamment les formes, les chemins, les remplissages, les gradients, les filtres et les transformations en utilisant C# et Aspose.SVG for .NET.