Paint Builder – Configurar SVG Fill y Stroke en C#

¿Qué es PaintBuilder?

Aspose.SVG Builder API permite configurar las propiedades SVG fill y stroke mediante programación con sintaxis fluida. La clase PaintBuilder simplifica la creación de valores paint SVG, incluidos colores sólidos y referencias a paint servers como patterns y gradients, en aplicaciones C#.

La configuración de paint SVG se usa para fondos reutilizables, texturas decorativas, estilos de gráficos, rellenos de iconos y efectos vectoriales. Con builders anidados y métodos encadenados, la generación de SVG es más legible y fácil de mantener.

Este artículo explica cómo usar PaintBuilder, una clase builder para crear valores paint para elementos SVG. Esta clase se usa para especificar los valores de los atributos stroke o fill al aplicar colores, patterns o gradients.

PaintBuilder forma parte de Aspose.SVG Builder API y se usa para configurar valores SVG fill y stroke. Admite varios valores paint SVG:

• colores sólidos
• referencias a SVG patterns
• referencias a SVG gradients
• otras referencias a paint servers

Builder API utiliza un modelo de configuración fluida que simplifica la creación y el diseño de elementos SVG.

Crear SVG Pattern Fills

Los SVG patterns permiten rellenar formas con elementos gráficos repetidos en lugar de colores sólidos. Los patterns se definen una vez y pueden reutilizarse en varios elementos SVG. En el siguiente ejemplo, PaintServerId() de PaintBuilder establece el valor fill como una referencia a un paint server por su Id.

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

// Create SVG pattern with polygons and apply as fill to rectangle using C# Builder API

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
        .ViewBox(0, 0, 400, 400)
        .AddG(g => g
            .AddPattern(p => p.Id("stars")
                .ViewBox(0, 0, 20, 20)
                .Width(5, LengthType.Percentage)
                .Height(5, LengthType.Percentage)
                .PatternUnits(CoordinateUnits.UserSpaceOnUse)
                .AddPolygon(points: new double[] { 5, 0, 7, 3, 10, 5, 7, 7, 5, 10, 3, 7, 0, 5, 3, 3 }, fill: Color.Teal)
                .AddPolygon(points: new double[] { 15, 0, 17, 3, 20, 5, 17, 7, 15, 10, 13, 7, 10, 5, 13, 3 }, fill: Color.DarkRed)
                .AddPolygon(points: new double[] { 15, 10, 17, 13, 20, 15, 17, 17, 15, 20, 13, 17, 10, 15, 13, 13 }, fill: Color.DarkBlue)
            )
            .AddRect(r => r.Rect(20, 40, 440, 80).Fill(pt => pt.PaintServerId("stars")))
            )
        .Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "pattern-stars.svg"));
}

En este ejemplo, primero se define un pattern con AddPattern(), combinando polígonos de colores para crear un relleno complejo. El pattern recibe el identificador stars. Luego se aplica a un rectángulo con Fill() y PaintServerId("stars").

Aplicar Patterns a formas SVG

Los rellenos con patterns pueden aplicarse a rectángulos, círculos, rutas, polígonos y texto. Cualquier elemento SVG compatible con fill puede usar una referencia a paint server creada con PaintBuilder.

El siguiente ejemplo C# muestra cómo crear SVG patterns y aplicarlos a formas dentro del documento. El código muestra el enfoque de «constructor dentro de constructor», que utiliza varias clases constructoras, donde un constructor se anida dentro de otro para facilitar la construcción de objetos o estructuras complejos y proporcionar un enfoque modular и estructurado para la creación de documentos SVG:

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

// Create SVG patterns with reusable elements and apply them to circles using C# Builder API

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
        .ViewBox(0, 0, 600, 600)
        .AddG(g => g
            .FontFamily("Arial")
            .FontSize(10)
            .AddPattern(p => p.Id("Pat3a")
                .Rect(0, 0, 20, 20)
                .PatternUnits(CoordinateUnits.UserSpaceOnUse)
                .AddRect(r => r.Rect(0, 0, 10, 10).Fill(Color.LightSlateGray))
                .AddRect(r => r.Rect(10, 0, 10, 10).Fill(Color.Teal))
                .AddRect(r => r.Rect(0, 10, 10, 10).Fill(Color.DarkRed))
                .AddRect(r => r.Rect(10, 10, 10, 10).Fill(Color.Gold))
            )
            .AddPattern(p => p.Id("Pat3b")
                .Href("#Pat3a")
                .Width(23).Height(23)
            )
            .AddPattern(p => p.Id("Pat3c")
                .Href("#Pat3a")
                .Width(15).Height(15)
            )
            .AddCircle(circle => circle.Cx(90).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3a")))
            .AddText(t => t.X(55).Y(50)
                .AddContent("Pattern #Pat3a")
            )
            .AddCircle(circle => circle.Cx(240).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3b")))
            .AddText(t => t.X(205).Y(50)
                .AddContent("Pattern #Pat3b")
            )
            .AddCircle(circle => circle.Cx(390).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3c")))
            .AddText(t => t.X(355).Y(50)
                .AddContent("Pattern #Pat3c")
            )
        )
        .Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "patterns.svg"));
}

Cómo funciona el Pattern

El elemento <pattern> define una tesela reutilizable que se repite sobre la forma rellenada. En este ejemplo:

• Width() y Height() definen el tamaño de la tesela repetida;
• PatternUnits(UserSpaceOnUse) usa coordenadas fijas para la repetición;
• el elemento circle define el contenido gráfico repetido dentro del pattern.

El pattern puede reutilizarse en varios elementos SVG referenciando el mismo ID. Dimensiones menores generan repeticiones más densas, mientras que valores mayores aumentan el espaciado.

En el ejemplo, se agregan tres patterns diferentes, llamados Pat3a, Pat3b y Pat3c, al documento SVG.

• Para Pat3a, se define un pattern utilizando el método AddPattern() dentro del método AddG(). Dentro de este pattern, se agregan cuatro rectángulos para definir las diferentes secciones del pattern en diferentes colores dentro de un espacio de 20x20 unidades — una tesela.
• Pat3b y Pat3c se definen como referencias a Pat3a, con diferentes tamaños de tesela especificados mediante los métodos Width() y Height().

La altura y la anchura de una tesela en un elemento de pattern definen el tamaño de la unidad de pattern repetida en el documento SVG. Este tamaño determina el aspecto del pattern cuando se aplica a formas o elementos. En el pattern Pat3b, al aumentar la altura y la anchura de la tesela se amplía la unidad de pattern, lo que da lugar a zonas sin rellenar (transparentes). En el pattern Pat3c, al reducir la altura y la anchura de la tesela el pattern parece más denso, creando un efecto visual diferente.

Por lo tanto, ajustar la altura y la anchura de la tesela en un elemento SVG <pattern> permite controlar la densidad y la repetición del pattern dentro del documento SVG y permite crear diversos efectos visuales.

Crear Linear Gradient Fills

Aspose.SVG Builder API permite crear SVG linear gradients reutilizables y aplicarlos a formas SVG mediante programación. Los gradients se usan en fondos, gráficos, botones y elementos decorativos.

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

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(400).Height(200)
        .ViewBox(0, 0, 400, 200)
        .AddDefs(defs => defs
            .AddLinearGradient(gradient => gradient
                .Id("gradientFill")
                .X1(0, LengthType.Percentage).Y1(0, LengthType.Percentage)
                .X2(100, LengthType.Percentage).Y2(0, LengthType.Percentage)
                .AddStop(stop => stop
                    .Offset(0, StopUnitType.Percentage)
                    .Attribute("stop-color", "gold"))
                .AddStop(stop => stop
                    .Offset(100, StopUnitType.Percentage)
                    .Attribute("stop-color", "teal"))))
        .AddRect(rect => rect
            .Rect(20, 20, 360, 160)
            .Fill(paint => paint.PaintServerId("gradientFill")))
        .Build(document.FirstChild as SVGSVGElement);

    document.Save(Path.Combine(OutputDir, "linear-gradient-fill.svg"));
}

Cómo funciona el Gradient

El ejemplo crea una definición SVG <linearGradient> reutilizable dentro de <defs> y la aplica al relleno de un rectángulo.

• AddLinearGradient() define la dirección y el identificador del gradient;
• AddStop() define los puntos de transición de color;
• PaintServerId("gradientFill") aplica el paint server del gradient al relleno del rectángulo y produce una referencia url(#gradientFill) en la salida SVG;
• el gradient puede reutilizarse en varios elementos SVG.

Errores comunes y soluciones

Problema	Causa	Solución
El pattern no es visible	ID de pattern incorrecto	Asegúrese de que PaintServerId() coincida con Id()
El pattern aparece estirado	La tesela es demasiado grande	Ajuste Width() y Height() del pattern
El pattern no se repite bien	Valor PatternUnits incorrecto	Use UserSpaceOnUse si necesita teselas fijas
El fill no se aplica	Pattern definido fuera del alcance accesible	Defina patterns antes de aplicarlos

FAQ

1. ¿Qué es un paint server en SVG?
Un paint server es un recurso SVG que proporciona valores fill o stroke. Los más comunes son patterns y gradients referenciados con url(#id).

2. ¿Puedo reutilizar el mismo SVG pattern en varias formas?
Sí. Un SVG pattern puede reutilizarse en varios elementos con el mismo ID mediante PaintServerId().

3. ¿Cuál es la diferencia entre UserSpaceOnUse y ObjectBoundingBox?
UserSpaceOnUse usa coordenadas fijas, mientras que ObjectBoundingBox escala el pattern respecto al tamaño del elemento destino.

4. ¿Por qué mi SVG pattern se ve estirado?
Suele ocurrir si la tesela del pattern es demasiado grande o si el sistema de coordenadas no coincide con el elemento destino.

5. ¿Puedo aplicar SVG patterns al texto?
Sí. Los elementos de texto SVG admiten fill y pueden usar patterns igual que las formas.

6. ¿PaintBuilder admite SVG gradients?
Sí. PaintBuilder admite referencias a paint servers para configurar gradients SVG mediante programación.

Recursos relacionados

• El artículo SVG Builder API explica cómo crear y manipular elementos SVG mediante programación en C# usando Aspose.SVG Builder API. Aprenda cómo los constructores fluidos simplifican la generación de SVG y mejoran la legibilidad del código en las aplicaciones .NET.
• El artículo Element Builders explora los constructores de elementos SVG en Aspose.SVG for .NET. Aprenda cómo las clases constructoras especializadas simplifican la creación de formas, gráficos и estructuras de documentos SVG en C#.
• El artículo Path Builder explica cómo crear rutas SVG mediante programación en C#. Aprenda cómo la clase PathBuilder simplifica la generación de formas complejas, curvas и gráficos vectoriales SVG mediante una sintaxis fluida.
• El artículo Rule Builder explica cómo crear reglas de estilo CSS para documentos SVG en C# utilizando la clase RuleBuilder. Aprenda a configurar estilos SVG mediante programación en aplicaciones .NET.
• El artículo Filtros SVG explica cómo crear efectos de filtro SVG como el desenfoque gaussiano, las sombras paralelas, la iluminación и la saturación en C#. Aprenda a aplicar filtros SVG mediante programación con Aspose.SVG for .NET.
• El artículo Gradientes SVG explica cómo crear gradientes SVG lineales и radiales en C#. Aprenda a definir rellenos de gradiente SVG reutilizables en XML и a generarlos mediante programación.
• La sección Conceptos básicos de dibujo SVG cubre los fundamentos de la creación de gráficos SVG, incluyendo formas, rutas, rellenos, gradientes, filtros и transformaciones usando C# и Aspose.SVG for .NET.