Rule Builder – Crear reglas CSS SVG en C#

Reglas de estilo SVG en C#

Los documentos SVG admiten estilos CSS mediante el elemento <style>, lo que permite aplicar reglas visuales reutilizables a gráficos SVG. Con Aspose.SVG Builder API, puede configurar estilos SVG mediante programación en C# sin escribir cadenas CSS manualmente.

Este artículo explica cómo crear reglas de estilo SVG en C#, aplicar selectores CSS a elementos SVG, configurar fuentes personalizadas y administrar estilos SVG reutilizables mediante programación usando Aspose.SVG for .NET.

¿Qué es RuleBuilder?

RuleBuilder forma parte de Aspose.SVG Builder API y se utiliza para configurar declaraciones CSS para reglas de estilo SVG mediante programación. Junto con SVGStyleElementBuilder, permite a los desarrolladores:

• crear elementos SVG <style>;
• definir selectores CSS reutilizables;
• configurar estilos de relleno y trazo SVG;
• aplicar configuración tipográfica;
• crear temas visuales reutilizables para gráficos SVG.

Usar reglas CSS centralizadas simplifica el mantenimiento de SVG y reduce el código de estilo duplicado.

Crear reglas de estilo SVG en C#

Aspose.SVG Builder API ofrece la clase SVGStyleElementBuilder, que es un generador de elementos para construir un elemento SVG <style>. Esta clase facilita la creación y configuración de un elemento SVG <style> con reglas CSS.

Este ejemplo muestra cómo crear un elemento SVG <style>, agregarle una regla CSS @font-face y usar el método AddRule() para definir estilos de fuente para elementos de texto dentro de un documento 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"));
}

Regla @font-face

La regla CSS @font-face permite especificar fuentes para mostrar texto que pueden descargarse desde un servidor remoto o desde el equipo del usuario. La regla define un nombre de familia de fuentes personalizado y especifica la URL de origen del archivo de fuente.

• El método FontFamily() establece la propiedad CSS font-family en la regla de estilo generada. Especifica el nombre de fuente que se usará para los elementos de texto coincidentes.
• El método Attribute() de la clase RuleBuilder establece el descriptor CSS src dentro de la regla @font-face con la URL de origen del archivo de fuente.

En el ejemplo anterior, la regla @font-face define una familia de fuentes personalizada llamada "VeinlineRegular". Esta regla garantiza que la fuente se cargue y esté disponible para su uso dentro del documento SVG.

Método AddRule()

El método AddRule() pertenece a SVGStyleElementBuilder y permite crear reglas CSS en documentos SVG. Toma dos parámetros: el nombre del selector CSS y una expresión lambda que define las propiedades del estilo usando RuleBuilder.

En el ejemplo de C# anterior, se agregan dos reglas:

• La primera regla define la regla @font-face, que garantiza la disponibilidad de la fuente VeinlineRegular.
• La segunda regla aplica la familia de fuentes VeinlineRegular y establece el tamaño de fuente en 30 puntos para todos los elementos de texto del SVG.

Builders within Builders

SVG Builder API introduce azúcar sintáctico (syntactic sugar) para refinar aún más el proceso de creación и manipulación de SVG. Esto incluye constructores anidados para varios elementos SVG, lo que proporciona una forma más intuitiva и eficiente de definir estructuras SVG complejas. El patrón «builder within a builder» implica el uso de varias clases de constructores, donde uno se anida dentro de otro para facilitar la construcción de objetos o estructuras complejos.

El siguiente fragmento muestra cómo usar RuleBuilder, un ejemplo de builder dentro de otro builder, para crear y aplicar estilos a gráficos SVG mediante programación:

• Dentro de SVGSVGElementBuilder, se agrega un bloque de estilo con el método AddStyle().
• El método AddRule() de SVGStyleElementBuilder define reglas CSS por selector, por ejemplo “circle” o “text”. Dentro de cada expresión lambda, RuleBuilder configura declaraciones como color de relleno, color de trazo y familia de fuentes para los elementos SVG coincidentes.

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

Cómo funcionan las reglas de estilo

El método AddRule() crea reglas CSS reutilizables dentro del elemento SVG <style>. En este ejemplo:

• el selector "circle" aplica estilo a todos los círculos SVG;
• el selector "text" configura la tipografía para el texto SVG;
• las reglas de estilo se aplican automáticamente a los elementos SVG coincidentes.

Este enfoque separa la lógica de estilo de la estructura SVG y mejora la legibilidad del SVG.

Errores comunes y soluciones

Problema	Posible causa	Solución recomendada
Los estilos SVG no se aplican	Selector CSS incorrecto	Asegúrese de que AddRule() apunte al elemento SVG correcto
La fuente personalizada no se muestra	URL de fuente no válida	Verifique la ruta y accesibilidad del archivo de fuente
El texto se renderiza distinto entre sistemas	La fuente requerida no está disponible	Use fuentes incrustadas o cargadas desde web
Los elementos SVG ignoran reglas de estilo	Los atributos inline sobrescriben CSS	Quite estilos inline en conflicto
Faltan estilos de trazo o relleno	Configuración de propiedad incorrecta	Verifique las reglas Fill() y Stroke()

FAQ

1. ¿RuleBuilder es mejor que el estilo SVG inline?
Para gráficos SVG complejos, las reglas CSS reutilizables suelen ser más fáciles de mantener que atributos inline repetidos. Rule Builder ayuda a centralizar la lógica de estilo SVG y reducir código duplicado.

2. ¿Puedo aplicar estilos a clases e IDs SVG con RuleBuilder?
Sí. AddRule() admite selectores CSS estándar, incluidos selectores de elemento, clase e ID.

3. ¿Por qué usar reglas CSS dentro del SVG en lugar de archivos CSS externos?
Los estilos SVG embebidos hacen que los gráficos SVG sean autocontenidos y más fáciles de reutilizar en aplicaciones, exportaciones y archivos SVG independientes.

4. ¿Puedo reutilizar el mismo bloque de estilo SVG para varios elementos?
Sí. Un único bloque SVG <style> puede aplicar reglas reutilizables a varios elementos SVG mediante selectores compartidos.

Recursos relacionados

• El artículo Modificar estilos SVG mediante programación en C# explica cómo modificar и normalizar estilos SVG en C# usando Aspose.SVG con manipulación DOM и reescritura de atributos.
• El artículo Element Builders profundiza en los Element Builders usados en SVG Builder API. Aprenderá sobre la clase SVGElementBuilder, sus constructores especializados и cómo simplifican la programación de SVG.
• Consulte el artículo Path Builder para aprender más sobre la clase PathBuilder, diseñada para simplificar la creación и manipulación de rutas SVG. El artículo muestra cómo Path Builder ofrece una sintaxis intuitiva para definir rutas SVG mediante programación, lo que permite a los desarrolladores agilizar el proceso de creación de formas и curvas complejas.
• El artículo Paint Builder trata sobre PaintBuilder, una clase builder para crear valores de pintura para elementos SVG. Esta clase se utiliza para especificar el valor de los atributos stroke o fill para diversas formas и elementos SVG al rellenarlos con pintura, patrones o degradados.
• El artículo SVG Builder API explica cómo SVG Builder API aborda los desafíos de complejidad, claridad de código и versatilidad al manipular SVG.