Rule Builder – Créer des règles CSS SVG en C#

Règles de style SVG en C#

Les documents SVG prennent en charge le style CSS via l’élément <style>, ce qui permet d’appliquer des règles visuelles réutilisables aux graphiques SVG. Avec Aspose.SVG Builder API, vous pouvez configurer les styles SVG par programmation en C# sans écrire manuellement des chaînes CSS.

Cet article explique comment créer des règles de style SVG en C#, appliquer des sélecteurs CSS aux éléments SVG, configurer des polices personnalisées et gérer des styles SVG réutilisables par programmation avec Aspose.SVG for .NET.

Qu’est-ce que RuleBuilder?

RuleBuilder fait partie de l’API Aspose.SVG Builder et sert à configurer par programmation les déclarations CSS des règles de style SVG. Avec SVGStyleElementBuilder, il permet aux développeurs de:

• créer des éléments SVG <style>;
• définir des sélecteurs CSS réutilisables;
• configurer les styles de remplissage et de contour SVG;
• appliquer des paramètres typographiques;
• créer des thèmes visuels réutilisables pour les graphiques SVG.

Les règles CSS centralisées simplifient la maintenance SVG et réduisent la duplication du code de style.

Créer des règles de style SVG en C#

Aspose.SVG Builder API propose la classe SVGStyleElementBuilder, un builder d’élément permettant de construire un élément SVG <style>. Cette classe facilite la création et la configuration d’un élément SVG <style> contenant des règles CSS.

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 des é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"));
}

Règle @font-face

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

• La méthode FontFamily() définit la propriété CSS font-family dans la règle de style générée. Elle indique le nom de police utilisé pour les éléments de texte correspondants.
• La méthode Attribute() de la classe RuleBuilder définit le descripteur CSS src dans la règle @font-face 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 dans le document SVG.

Méthode AddRule()

La méthode AddRule() appartient à SVGStyleElementBuilder et permet de créer des règles CSS dans les documents SVG. Elle prend deux paramètres: le nom du sélecteur CSS et une expression lambda qui définit les propriétés du style avec 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 définit la taille de police à 30 points pour tous les éléments de texte du SVG.

Builders within Builders

SVG Builder API introduit du sucre syntaxique (syntactic sugar) pour affiner davantage le processus de création et de manipulation de SVG. Cela inclut des builders imbriqués pour divers éléments SVG, offrant un moyen plus intuitif et efficace de définir des structures SVG complexes. Un modèle « builder within a builder » implique l’utilisation de plusieurs classes de builders, où un builder est imbriqué dans un autre pour faciliter la construction d’objets ou de structures complexes.

L’extrait suivant montre comment utiliser RuleBuilder, exemple de builder dans un builder, pour créer et styliser des graphiques SVG par programmation:

• Dans SVGSVGElementBuilder, un bloc de style est ajouté avec la méthode AddStyle().
• La méthode AddRule() de SVGStyleElementBuilder définit des règles CSS par sélecteur, par exemple “circle” ou “text”. Dans chaque expression lambda, RuleBuilder configure les déclarations telles que la couleur de remplissage, la couleur de contour et la famille de polices pour les éléments SVG correspondants.

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"));
}

Fonctionnement des règles de style

La méthode AddRule() crée des règles CSS réutilisables dans l’élément SVG <style>. Dans cet exemple:

• le sélecteur "circle" stylise tous les éléments cercle SVG;
• le sélecteur "text" configure la typographie du texte SVG;
• les règles de style sont automatiquement appliquées aux éléments SVG correspondants.

Cette approche sépare la logique de style de la structure SVG et améliore la lisibilité du SVG.

Erreurs courantes et corrections

Problème	Cause possible	Correction recommandée
Les styles SVG ne sont pas appliqués	Sélecteur CSS incorrect	Vérifier que AddRule() cible le bon élément SVG
La police personnalisée ne s’affiche pas	URL de police invalide	Vérifier le chemin et l’accessibilité du fichier de police
Le rendu du texte varie selon les systèmes	La police requise n’est pas disponible	Utiliser des polices intégrées ou chargées depuis le web
Les éléments SVG ignorent les règles de style	Des attributs inline remplacent le CSS	Supprimer les styles inline conflictuels
Les styles de contour ou de remplissage manquent	Configuration incorrecte des propriétés	Vérifier les règles Fill() et Stroke()

FAQ

1. RuleBuilder est-il préférable au style SVG inline?
Pour les graphiques SVG complexes, les règles CSS réutilisables sont généralement plus faciles à maintenir que des attributs inline répétés. Rule Builder aide à centraliser la logique de style SVG et à réduire le code dupliqué.

2. Puis-je styliser des classes et IDs SVG avec RuleBuilder?
Oui. AddRule() prend en charge les sélecteurs CSS standards, y compris les sélecteurs d’élément, de classe et d’ID.

3. Pourquoi utiliser des règles CSS dans SVG plutôt que des fichiers CSS externes?
Les styles SVG intégrés rendent les graphiques SVG autonomes et plus faciles à réutiliser dans les applications, exports et fichiers SVG indépendants.

4. Puis-je réutiliser le même bloc de style SVG pour plusieurs éléments?
Oui. Un seul bloc SVG <style> peut appliquer des règles réutilisables à plusieurs éléments SVG avec des sélecteurs partagés.

Ressources connexes

• L’article Modifier les styles SVG par programmation en C# explique comment modifier et normaliser les styles SVG en C# avec Aspose.SVG, via la manipulation DOM et la réécriture d’attributs.
• L’article Element Builders explore en profondeur les Element Builders utilisés dans SVG Builder API. Vous découvrirez la classe SVGElementBuilder, ses builders 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 le Path Builder offre une syntaxe intuitive pour définir les chemins SVG par programmation, permettant aux développeurs d’optimiser le processus de création de formes et de courbes complexes.
• L’article Paint Builder présente PaintBuilder, une classe builder pour 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 de leur remplissage avec de la peinture, des motifs ou des dégradés.
• L’article SVG Builder API explique comment SVG Builder API répond aux défis de la complexité, de la clarté du code et de la polyvalence lors de la manipulation de SVG.