Rule Builder – Configurer le style SVG – C#

Style SVG

L’élément SVG <style> est utilisé pour définir des styles internes dans un document SVG. Il permet aux développeurs d’appliquer des règles CSS directement aux éléments SVG, offrant ainsi un moyen pratique de contrôler l’apparence des graphiques SVG.

L’API Aspose.SVG Builder propose la classe SVGStyleElementBuilder, qui est un générateur d’éléments permettant de construire un élément SVG <style>. Cette classe facilite la création et la configuration d’un élément SVG <style> avec des règles CSS.

Cet article concerne la classe RuleBuilder, qui est une classe de générateur permettant de construire des règles de style CSS. Cette classe est utilisée pour créer dynamiquement une chaîne de styles CSS en définissant divers attributs et leurs valeurs.

Rule Builder – Classe RuleBuilder

Le Rule Builder permet aux développeurs d’appliquer des règles CSS aux documents SVG par programmation dans le code C#, offrant ainsi flexibilité et contrôle sur l’apparence visuelle des éléments SVG. Cet exemple montre comment créer un élément SVG <style>, y ajouter une règle CSS @font-face et utiliser la méthode AddRule() pour définir les styles de police pour les éléments de texte dans un document SVG:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Configure an SVG document's style with external font-face rules in C# using Rule Builder

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element and use Builder API to add other rules and elements to it
    SVGSVGElement svg = new SVGSVGElementBuilder()
        
       .AddDefs(def => def
            .AddStyle(st => st
                .Type("text/css")
                .AddRule("@font-face", r => r
                    .FontFamily("VeinlineRegular")
                    .Attribute("src", "url(https://assets.ithillel.ua/wiki/VeinlineRegular.ttf)")
                )
                .AddRule("text", t => t
                    .FontFamily("VeinlineRegular")
                    .FontSize(30, LengthType.Pt)
                )
            )
        )
            .AddText(t => t
            .X(20).Y(60).Fill(Color.DarkRed).FontWeight(FontWeight.Bold)
            .AddContent("Configure SVG Style")
            )
            .AddText(t => t
            .X(20).Y(150)
            .AddContent("Set your SVG style with Rule Builder!")
            )
        .Build(document.FirstChild as SVGSVGElement);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "font-face.svg"));
}

@font-face

La règle CSS @font-face vous permet de spécifier des polices pour afficher le texte sur les pages Web qui peuvent être téléchargées soit depuis un serveur distant, soit depuis l’ordinateur de l’utilisateur. La règle définit un nom de famille de polices personnalisé et spécifie l’URL source du fichier de police.

• La méthode FontFamily() définit l’attribut font-family pour un élément SVG. Il spécifie le nom de la police qui sera utilisé pour définir les propriétés de la police.
• La méthode Attribute() de la classe RuleBuilder définit un attribut scr pour l’élément <style> avec l’URL source du fichier de police.

Dans l’exemple ci-dessus, la règle @font-face définit une famille de polices personnalisée nommée “VeinlineRegular”. Cette règle garantit que la police est chargée et disponible pour être utilisée dans le document SVG.

Méthode AddRule()

La méthode AddRule() fait partie du Rule Builder, qui vous permet de créer des règles CSS dans des documents SVG. Il prend deux paramètres: le nom du sélecteur CSS et une expression lambda définissant les propriétés du style à l’aide de RuleBuilder.

Dans l’exemple C# ci-dessus, deux règles sont ajoutées:

• La première règle définit la règle @font-face, qui garantit la disponibilité de la police VeinlineRegular.
• La deuxième règle applique la famille de polices VeinlineRegular et fixe la taille de police à 30 points pour tous les éléments de texte du SVG.

Constructeurs dans les Constructeurs – Builders within Builders

L’API SVG Builder introduit du sucre de syntaxe pour affiner davantage le processus de création et de manipulation SVG. Cela inclut des générateurs imbriqués pour divers éléments SVG, offrant un moyen plus intuitif et efficace de définir des structures SVG complexes. Un modèle “constructeur dans un constructeur” implique l’utilisation de plusieurs classes de constructeur, dans lesquelles un constructeur est imbriqué dans un autre pour faciliter la construction d’objets ou de structures complexes.

L’extrait de code suivant montre comment utiliser « RuleBuilder », qui est un exemple de générateur dans un générateur, pour créer et styliser des graphiques SVG par programme :

• Dans SVGSVGElementBuilder, un bloc de style est ajouté à l’aide de la méthode AddStyle().
• Dans RuleBuilder, les règles CSS sont définies à l’aide de la méthode AddRule(), en spécifiant des sélecteurs (par exemple, “circle”, “text”) et en appliquant des propriétés (par exemple, couleur de remplissage, couleur de trait, famille de polices) pour cibler les éléments SVG.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Create SVG with styled circle and text elements using C# Rule Builder API and fluent syntax

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element and use Builder API to add other rules and elements to it
    SVGSVGElement svg = new SVGSVGElementBuilder()
       
        .AddStyle(st => st
            .AddRule("circle", r => r
                .Fill(paint: Paint.None)
                .Stroke(color: Color.DarkRed)
                .StrokeWidth(60)
            )
            .AddRule("text", t => t
                .Fill(color: Color.Red)
                .Stroke(color: Color.Teal)
                .StrokeWidth(1)
                .FontFamily("Arial")
                .FontSize(30, LengthType.Pt)
            )
        )
        .AddG(g => g
            .AddCircle(circle => circle.Cx(100).Cy(130).R(60).StrokeDashArray(2, 14))
            .AddText("Rule Builder", x: 230, y: 140)
        )
        .Build(document.FirstChild as SVGSVGElement);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "rule-builder.svg"));
}

Conclusion

Aspose.SVG for .NET fournit une fonctionnalité Rule Builder qui permet aux développeurs de définir par programme des règles CSS pour les éléments SVG à l’aide de l’API SVG Builder.

• L’utilisation de la classe RuleBuilder simplifie le processus de création et d’application de styles aux éléments SVG, facilitant ainsi la personnalisation de l’apparence des graphiques SVG dans le code C#.
• RuleBuilder offre flexibilité et contrôle sur l’apparence visuelle des éléments SVG.
• RuleBuilder fonctionne comme un “constructeur dans un constructeur”, ce qui facilite la création d’objets ou de structures complexes et améliore la lisibilité du code, le rendant plus facile à comprendre.

Voir également

• L’article Element Builders se penche sur les Element Builders utilisés dans l’API SVG Builder. Vous découvrirez la classe SVGElementBuilder, ses constructeurs spécialisés et comment ils simplifient la programmation SVG.
• Veuillez consulter l’article Path Builder pour en savoir plus sur la classe PathBuilder, conçue pour simplifier la création et la manipulation des chemins SVG. L’article montre comment Path Builder offre une syntaxe intuitive pour définir des chemins SVG par programme, permettant aux développeurs de rationaliser le processus de création de formes et de courbes complexes.
• L’article Paint Builder concerne PaintBuilder, une classe de construction permettant de créer des valeurs de peinture pour les éléments SVG. Cette classe est utilisée pour spécifier la valeur des attributs stroke ou fill pour diverses formes et éléments SVG lors du remplissage avec de la peinture, un motif ou un dégradé.