Paint Builder – SVG Fill und Stroke in C# konfigurieren

Was ist PaintBuilder?

Die Aspose.SVG Builder API ermöglicht es Entwicklern, SVG-fill- und stroke-Eigenschaften programmgesteuert mit fluent syntax zu konfigurieren. Die Klasse PaintBuilder vereinfacht das Erstellen von SVG-Paint-Werten, einschließlich Vollfarben und Referenzen auf Paint Server wie Pattern und Gradients, in C#-Anwendungen.

SVG-Paint-Konfigurationen werden häufig für wiederverwendbare Hintergründe, dekorative Texturen, Diagrammstile, Icon-Füllungen und Vektorgrafikeffekte verwendet. Mit verschachtelten Builders und verketteten Konfigurationsmethoden wird die SVG-Erzeugung lesbarer und leichter wartbar.

Dieser Artikel erklärt die Verwendung von PaintBuilder, einer Builder-Klasse zum Erstellen von Paint-Werten für SVG-Elemente. Die Klasse wird verwendet, um die Werte der Attribute stroke oder fill für SVG-Formen und -Elemente beim Anwenden von Farben, Pattern oder Gradients festzulegen.

PaintBuilder ist Teil der Aspose.SVG Builder API und wird zum Konfigurieren von SVG-fill- und stroke-Werten verwendet. Unterstützt werden mehrere SVG-Paint-Werte:

Vollfarben
SVG-Pattern-Referenzen
SVG-Gradient-Referenzen
andere Paint-Server-Referenzen

Die Builder API verwendet ein Fluent-Konfigurationsmodell, das die Erstellung und Formatierung von SVG-Elementen vereinfacht.

Das Builder-API-Modell vereinfacht die Erstellung und Formatierung von SVG-Elementen.

SVG Pattern Fills erstellen

SVG-Pattern ermöglichen es, Formen mit wiederholten grafischen Elementen statt mit Vollfarben zu füllen. Pattern werden einmal definiert und können für mehrere SVG-Elemente wiederverwendet werden. Im folgenden Beispiel setzt PaintServerId() der Klasse PaintBuilder den fill-Wert auf eine Paint-Server-Referenz über deren Id.

1using Aspose.Svg.Builder;
2using System.Drawing;
3using System.IO;

 1// Create SVG pattern with polygons and apply as fill to rectangle using C# Builder API
 2
 3using (SVGDocument document = new SVGDocument())
 4{
 5    SVGSVGElement svg = new SVGSVGElementBuilder()
 6        .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
 7        .ViewBox(0, 0, 400, 400)
 8        .AddG(g => g
 9            .AddPattern(p => p.Id("stars")
10                .ViewBox(0, 0, 20, 20)
11                .Width(5, LengthType.Percentage)
12                .Height(5, LengthType.Percentage)
13                .PatternUnits(CoordinateUnits.UserSpaceOnUse)
14                .AddPolygon(points: new double[] { 5, 0, 7, 3, 10, 5, 7, 7, 5, 10, 3, 7, 0, 5, 3, 3 }, fill: Color.Teal)
15                .AddPolygon(points: new double[] { 15, 0, 17, 3, 20, 5, 17, 7, 15, 10, 13, 7, 10, 5, 13, 3 }, fill: Color.DarkRed)
16                .AddPolygon(points: new double[] { 15, 10, 17, 13, 20, 15, 17, 17, 15, 20, 13, 17, 10, 15, 13, 13 }, fill: Color.DarkBlue)
17            )
18            .AddRect(r => r.Rect(20, 40, 440, 80).Fill(pt => pt.PaintServerId("stars")))
19            )
20        .Build(document.FirstChild as SVGSVGElement);
21    document.Save(Path.Combine(OutputDir, "pattern-stars.svg"));
22}

Example-CreateSvgPatternFillRectangle.cs hosted with ❤ by GitHub

In diesem Beispiel wird zuerst mit AddPattern() ein Pattern definiert, in dem farbige Polygone zu einem komplexen Füllmuster kombiniert werden. Das Pattern erhält die Kennung stars. Anschließend wird dieses Pattern mit Fill() und PaintServerId("stars") auf ein Rechteck angewendet.

Visualisierung des stars-Patterns auf einem SVG-Rechteck.

Pattern auf SVG-Formen anwenden

Pattern-Füllungen können auf verschiedene SVG-Elemente angewendet werden, darunter Rechtecke, Kreise, Pfade, Polygone und Textelemente. Jedes SVG-Element, das die Eigenschaft fill unterstützt, kann eine mit PaintBuilder erzeugte Paint-Server-Referenz verwenden.

Das folgende C#-Beispiel zeigt, wie SVG-Pattern erstellt und auf Formen im Dokument angewendet werden. Der Code demonstriert den „Builder-in-Builder“-Ansatz, bei dem mehrere Builder-Klassen verwendet werden, wobei ein Builder in einen anderen verschachtelt ist, um den Aufbau komplexer Objekte oder Strukturen zu erleichtern und einen modularen und strukturierten Ansatz für die Erstellung von SVG-Dokumenten zu bieten:

1using Aspose.Svg.Builder;
2using System.Drawing;
3using System.IO;

 1// Create SVG patterns with reusable elements and apply them to circles using C# Builder API
 2
 3using (SVGDocument document = new SVGDocument())
 4{
 5    SVGSVGElement svg = new SVGSVGElementBuilder()
 6        .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
 7        .ViewBox(0, 0, 600, 600)
 8        .AddG(g => g
 9            .FontFamily("Arial")
10            .FontSize(10)
11            .AddPattern(p => p.Id("Pat3a")
12                .Rect(0, 0, 20, 20)
13                .PatternUnits(CoordinateUnits.UserSpaceOnUse)
14                .AddRect(r => r.Rect(0, 0, 10, 10).Fill(Color.LightSlateGray))
15                .AddRect(r => r.Rect(10, 0, 10, 10).Fill(Color.Teal))
16                .AddRect(r => r.Rect(0, 10, 10, 10).Fill(Color.DarkRed))
17                .AddRect(r => r.Rect(10, 10, 10, 10).Fill(Color.Gold))
18            )
19            .AddPattern(p => p.Id("Pat3b")
20                .Href("#Pat3a")
21                .Width(23).Height(23)
22            )
23            .AddPattern(p => p.Id("Pat3c")
24                .Href("#Pat3a")
25                .Width(15).Height(15)
26            )
27            .AddCircle(circle => circle.Cx(90).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3a")))
28            .AddText(t => t.X(55).Y(50)
29                .AddContent("Pattern #Pat3a")
30            )
31            .AddCircle(circle => circle.Cx(240).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3b")))
32            .AddText(t => t.X(205).Y(50)
33                .AddContent("Pattern #Pat3b")
34            )
35            .AddCircle(circle => circle.Cx(390).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3c")))
36            .AddText(t => t.X(355).Y(50)
37                .AddContent("Pattern #Pat3c")
38            )
39        )
40        .Build(document.FirstChild as SVGSVGElement);
41    document.Save(Path.Combine(OutputDir, "patterns.svg"));
42}

Example-CreateSvgPatternsUsingPaintBuilder.cs hosted with ❤ by GitHub

Visualisierung der Datei patterns.svg mit mehreren SVG-Pattern-Füllungen.

Funktionsweise des Patterns

Das <pattern>-Element definiert eine wiederverwendbare Kachel, die sich über die gefüllte Form wiederholt. In diesem Beispiel:

definieren Width() und Height() die Größe der wiederholten Kachel;
verwendet PatternUnits(UserSpaceOnUse) feste Koordinaten für die Wiederholung;
definiert das Kreiselement den wiederholten grafischen Inhalt im Pattern.

Das Pattern kann für mehrere SVG-Elemente wiederverwendet werden, indem dieselbe Pattern-ID referenziert wird. Kleinere Pattern-Abmessungen erzeugen dichtere Wiederholungen, größere Werte erhöhen den Abstand.

Im Beispiel werden drei verschiedene Pattern namens Pat3a, Pat3b und Pat3c zum SVG-Dokument hinzugefügt.

Für Pat3a wird ein Pattern mit der Methode AddPattern() innerhalb der Methode AddG() definiert. Innerhalb dieses Patterns werden vier Rechtecke hinzugefügt, um verschiedene farbige Bereiche innerhalb eines 20x20-Einheiten-Raums – einer Kachel – zu definieren.
Pat3b und Pat3c sind als Verweise auf Pat3a definiert, wobei unterschiedliche Kachelgrößen mit den Methoden Width() und Height() festgelegt werden.

Die Höhe und Breite einer Kachel in einem Pattern-Element definieren die Größe der wiederholten Pattern-Einheit im SVG-Dokument. Diese Größe bestimmt, wie das Pattern aussieht, wenn es auf Formen oder Elemente angewendet wird. Im Pattern Pat3b vergrößert das Erhöhen der Höhe und Breite der Kachel die Pattern-Einheit, was zu unbefüllten (transparenten) Bereichen führt. Im Pattern Pat3c macht das Verringern der Höhe und Breite der Kachel das Pattern dichter, was einen anderen visuellen Effekt erzeugt.

Durch Anpassen von Höhe und Breite der Kachel in einem SVG-<pattern>-Element können Sie also die Dichte und Wiederholung des Patterns innerhalb des SVG-Dokuments steuern und verschiedene visuelle Effekte erzielen.

Linear Gradient Fills erstellen

Aspose.SVG Builder API ermöglicht das Erstellen wiederverwendbarer SVG-Linear-Gradients und deren Anwendung auf SVG-Formen. Gradient-Füllungen werden häufig für Hintergründe, Diagramme, Buttons und dekorative Grafiken verwendet.

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4
 5using (SVGDocument document = new SVGDocument())
 6{
 7    SVGSVGElement svg = new SVGSVGElementBuilder()
 8        .Width(400).Height(200)
 9        .ViewBox(0, 0, 400, 200)
10        .AddDefs(defs => defs
11            .AddLinearGradient(gradient => gradient
12                .Id("gradientFill")
13                .X1(0, LengthType.Percentage).Y1(0, LengthType.Percentage)
14                .X2(100, LengthType.Percentage).Y2(0, LengthType.Percentage)
15                .AddStop(stop => stop
16                    .Offset(0, StopUnitType.Percentage)
17                    .Attribute("stop-color", "gold"))
18                .AddStop(stop => stop
19                    .Offset(100, StopUnitType.Percentage)
20                    .Attribute("stop-color", "teal"))))
21        .AddRect(rect => rect
22            .Rect(20, 20, 360, 160)
23            .Fill(paint => paint.PaintServerId("gradientFill")))
24        .Build(document.FirstChild as SVGSVGElement);
25
26    document.Save(Path.Combine(OutputDir, "linear-gradient-fill.svg"));
27}

Funktionsweise des Gradients

Das Beispiel erstellt eine wiederverwendbare SVG-<linearGradient>-Definition im <defs>-Abschnitt und wendet sie auf die Füllung eines Rechtecks an.

AddLinearGradient() definiert Richtung und Kennung des Gradients;
AddStop() definiert Farbübergangspunkte;
PaintServerId("gradientFill") wendet den Gradient-Paint-Server auf die Rechteckfüllung an und erzeugt eine url(#gradientFill)-Referenz in der SVG-Ausgabe;
der Gradient kann für mehrere SVG-Elemente wiederverwendet werden.

Häufige Fehler und Lösungen

Problem	Ursache	Lösung
Pattern ist nicht sichtbar	Falsche Pattern-ID	Sicherstellen, dass `PaintServerId()` zur Pattern-`Id()` passt
Pattern wirkt gestreckt	Kachelgröße ist zu groß	`Width()` und `Height()` des Patterns anpassen
Pattern wiederholt sich falsch	Falscher `PatternUnits`-Wert	`UserSpaceOnUse` verwenden, wenn feste Kachelgrößen nötig sind
Fill wird nicht angewendet	Pattern ist außerhalb des zugänglichen Bereichs definiert	Pattern vor der Verwendung definieren

FAQ

1. Was ist ein Paint Server in SVG?
Ein Paint Server ist eine SVG-Ressource, die fill- oder stroke-Werte bereitstellt. Häufige Paint Server sind Pattern und Gradients, die über url(#id) referenziert werden.

2. Kann ich dasselbe SVG-Pattern für mehrere Formen wiederverwenden?
Ja. Ein SVG-Pattern kann für mehrere Elemente wiederverwendet werden, indem dieselbe Pattern-ID mit PaintServerId() referenziert wird.

3. Was ist der Unterschied zwischen UserSpaceOnUse und ObjectBoundingBox?
UserSpaceOnUse verwendet feste Koordinaten für die Pattern-Darstellung, während ObjectBoundingBox das Pattern relativ zur Größe des Zielelements skaliert.

4. Warum wirkt mein SVG-Pattern gestreckt?
Das passiert meist, wenn die Pattern-Kachel zu groß ist oder das Koordinatensystem nicht zu den Abmessungen des Zielelements passt.

5. Kann ich SVG-Pattern auf Textelemente anwenden?
Ja. SVG-Textelemente unterstützen fill und können Pattern-Füllungen wie Formen verwenden.

6. Unterstützt PaintBuilder SVG-Gradients?
Ja. PaintBuilder unterstützt Paint-Server-Referenzen für die programmgesteuerte Konfiguration von SVG-Gradient-Füllungen.