Rule Builder – Configurar estilo SVG – C#

Estilo SVG – SVG Style

El elemento SVG <style> se utiliza para definir estilos internos dentro de un documento SVG. Permite a los desarrolladores aplicar reglas CSS directamente a elementos SVG, proporcionando una forma conveniente de controlar la apariencia de los gráficos SVG.

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 artículo trata sobre la clase RuleBuilder, que es una clase constructora para construir reglas de estilo CSS. Esta clase se utiliza para crear dinámicamente una cadena de estilos CSS estableciendo varios atributos y sus valores.

Rule Builder – clase RuleBuilder

Rule Builder permite a los desarrolladores aplicar reglas CSS para documentos SVG mediante programación dentro del código C#, ofreciendo flexibilidad y control sobre la apariencia visual de los elementos SVG. 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;
...

    using (var document = new SVGDocument())
    {
        var 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);
        document.Save(Path.Combine(OutputDir, "font-face.svg"));
    }

Regla @font-face

La regla CSS @font-face le permite especificar fuentes para mostrar texto en páginas web que se pueden descargar desde un servidor remoto o desde la computadora del usuario. La regla define un nombre de familia de fuentes personalizado y especifica la URL de origen del archivo de fuentes.

• El método FontFamily() establece el atributo font-family para un elemento SVG. Especifica el nombre de la fuente que se utilizará para establecer las propiedades de la fuente.
• El método Attribute() de la clase RuleBuilder establece un atributo scr para el elemento <style> 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 esté cargada y disponible para su uso dentro del documento SVG.

Método AddRule()

El método AddRule() es parte del Generador de reglas, que le permite crear reglas CSS en documentos SVG. Se necesitan dos parámetros: el nombre del selector CSS y una expresión lambda que define las propiedades del estilo usando RuleBuilder.

• 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 en SVG.

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

Constructores dentro de Constructores

SVG Builder API introduce azúcar de sintaxis para refinar aún más el proceso de creación y manipulación de SVG. Esto incluye constructores anidados para varios elementos SVG, lo que proporciona una forma más intuitiva y eficiente de definir estructuras SVG complejas. Un patrón de “builder within a builder” implica el uso de múltiples clases de constructores, donde un constructor está anidado dentro de otro para facilitar la construcción de estructuras o objetos complejos.

El siguiente fragmento de código demuestra cómo utilizar RuleBuilder, que es un ejemplo de un constructor dentro de un constructor, para crear y diseñar gráficos SVG mediante programación:

• Dentro del SVGSVGElementBuilder, se agrega un bloque de estilo usando el método AddStyle().
• Dentro de RuleBuilder, las reglas CSS se definen usando el método AddRule(), especificando selectores (por ejemplo, “circle”, “text”) y aplicando propiedades (por ejemplo, fill color, stroke color, font family) para apuntar a elementos SVG.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    // Initialize an SVG document
    using (var document = new SVGDocument())
    {
        // Create an <svg> element
        var 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"));
    }

Conclusión

Aspose.SVG for .NET proporciona una función de Generador de reglas que permite a los desarrolladores definir mediante programación reglas CSS para elementos SVG utilizando la API SVG Builder.

• El uso de la clase RuleBuilder simplifica el proceso de creación y aplicación de estilos a elementos SVG, lo que facilita la personalización de la apariencia de los gráficos SVG en código C#.
• RuleBuilder proporciona flexibilidad y control sobre la apariencia visual de los elementos SVG.
• RuleBuilder funciona como un constructor dentro de un constructor, lo que facilita la creación de objetos o estructuras complejos y mejora la legibilidad del código, haciéndolo más fácil de entender.

Ver también

• El artículo Element Builders profundiza en los Element Builders utilizados en SVG Builder API. Aprenderá sobre la clase SVGElementBuilder, sus constructores especializados y cómo simplifican la programación SVG.
• Consulte el artículo Path Builder para obtener más información sobre la clase PathBuilder, diseñada para simplificar la creación y 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 y curvas intrincadas.
• El artículo Paint Builder trata sobre PaintBuilder, una clase de creación para crear valores de pintura para elementos SVG. Esta clase se utiliza para especificar el valor de los atributos stroke o fill para varias formas y elementos SVG al rellenarlos con pintura, patrón o degradado.