Rule Builder – SVG-Stil konfigurieren – C#

SVG Style

Das SVG-Element <style> wird verwendet, um interne Stile innerhalb eines SVG-Dokuments zu definieren. Es ermöglicht Entwicklern, CSS-Regeln direkt auf SVG-Elemente anzuwenden und bietet so eine bequeme Möglichkeit, das Erscheinungsbild von SVG-Grafiken zu steuern.

Die Aspose.SVG Builder API bietet die Klasse SVGStyleElementBuilder, bei der es sich um einen Element-Builder zum Erstellen eines SVG-Elements <style> handelt. Diese Klasse erleichtert die Erstellung und Konfiguration eines SVG-Elements <style> mit CSS-Regeln.

In diesem Artikel geht es um die Klasse RuleBuilder, eine Builder-Klasse zum Erstellen von CSS-Stilregeln. Diese Klasse wird verwendet, um dynamisch eine Reihe von CSS-Stilen zu erstellen, indem verschiedene Attribute und deren Werte festgelegt werden.

Rule Builder – RuleBuilder-Klasse

Der Rule Builder ermöglicht Entwicklern die programmgesteuerte Anwendung von CSS-Regeln für SVG-Dokumente innerhalb von C#-Code und bietet so Flexibilität und Kontrolle über das visuelle Erscheinungsbild von SVG-Elementen. Dieses Beispiel zeigt, wie man ein SVG-Element <style> erstellt, ihm eine CSS-Regel @font-face hinzufügt und die AddRule()-Methode zum Definieren von Schriftstilen für Textelemente in einem SVG-Dokument:

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4...
 5
 6    using (var document = new SVGDocument())
 7    {
 8        var svg = new SVGSVGElementBuilder()
 9            
10            .AddDefs(def => def
11                .AddStyle(st => st
12                    .Type("text/css")
13                    .AddRule("@font-face", r => r
14                        .FontFamily("VeinlineRegular")
15                        .Attribute("src", "url(https://assets.ithillel.ua/wiki/VeinlineRegular.ttf)")
16                    )
17                    .AddRule("text", t => t
18                        .FontFamily("VeinlineRegular")
19                        .FontSize(30, LengthType.Pt)
20                    )
21                )
22            )
23                .AddText(t => t
24                .X(20).Y(60).Fill(Color.DarkRed).FontWeight(FontWeight.Bold)
25                .AddContent("Configure SVG Style")
26                )
27                .AddText(t => t
28                .X(20).Y(150)
29                .AddContent("Set your SVG style with Rule Builder!")
30                )
31            .Build(document.FirstChild as SVGSVGElement);
32        document.Save(Path.Combine(OutputDir, "font-face.svg"));
33    }

Text “font-face.svg-Dateivisualisierung”

@font-face-Regel

Mit der CSS-Regel @font-face können Sie Schriftarten für die Anzeige von Text auf Webseiten angeben, die entweder von einem Remote-Server oder vom Computer des Benutzers heruntergeladen werden können. Die Regel definiert einen benutzerdefinierten Schriftfamiliennamen und gibt die Quell-URL der Schriftdatei an.

Die Methode FontFamily() legt das Attribut font-family für ein SVG-Element fest. Es gibt den Schriftartnamen an, der zum Festlegen der Schriftarteigenschaften verwendet wird.
Die Attribute()-Methode der RuleBuilder-Klasse legt ein scr-Attribut für das <style>-Element mit der Quell-URL der Schriftartdatei fest.

Im obigen Beispiel definiert die @font-face-Regel eine benutzerdefinierte Schriftartfamilie mit dem Namen “VeinlineRegular”. Diese Regel stellt sicher, dass die Schriftart geladen wird und für die Verwendung im SVG-Dokument verfügbar ist.

AddRule()-Methode

Die Methode AddRule() ist Teil des Rule Builder, mit dem Sie CSS-Regeln in SVG-Dokumenten erstellen können. Es benötigt zwei Parameter: den Namen des CSS-Selektors und einen Lambda-Ausdruck, der die Eigenschaften des Stils mithilfe von RuleBuilder definiert.

Im obigen C#-Beispiel werden zwei Regeln hinzugefügt:

Die erste Regel definiert die @font-face-Regel, die die Verfügbarkeit der Schriftart VeinlineRegular garantiert. – Die zweite Regel wendet die Schriftfamilie VeinlineRegular an und legt die Schriftgröße für alle Textelemente im SVG auf 30 Punkt fest.

Bauherren innerhalb der Bauherren

Die SVG Builder-API führt Syntax Sugar ein, um den Prozess der SVG-Erstellung und -Bearbeitung weiter zu verfeinern. Dazu gehören verschachtelte Builder für verschiedene SVG-Elemente, die eine intuitivere und effizientere Möglichkeit bieten, komplexe SVG-Strukturen zu definieren. Ein Builder-in-Builder-Muster beinhaltet die Verwendung mehrerer Builder-Klassen, wobei ein Builder in einem anderen verschachtelt ist, um die Konstruktion komplexer Objekte oder Strukturen zu erleichtern.

Der folgende Codeausschnitt zeigt, wie man RuleBuilder, ein Beispiel für einen Builder innerhalb eines Builders, verwendet, um SVG-Grafiken programmgesteuert zu erstellen und zu formatieren:

Innerhalb des SVGSVGElementBuilder wird ein Stilblock mit der Methode AddStyle() hinzugefügt.
Innerhalb des RuleBuilder werden CSS-Regeln mithilfe der Methode AddRule() definiert, indem Selektoren (z. B. “circle”, “text”) angegeben und Eigenschaften (z. B. Füllfarbe, Strichfarbe angewendet werden, Schriftfamilie), um auf SVG-Elemente abzuzielen.

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4...
 5    // Initialize an SVG document
 6    using (var document = new SVGDocument())
 7    {
 8        // Create an <svg> element
 9        var svg = new SVGSVGElementBuilder()
10
11            .AddStyle(st => st
12                .AddRule("circle", r => r
13                    .Fill(paint: Paint.None)
14                    .Stroke(color: Color.DarkRed)
15                    .StrokeWidth(60)
16                )
17                .AddRule("text", t => t
18                    .Fill(color: Color.Red)
19                    .Stroke(color: Color.Teal)
20                    .StrokeWidth(1)
21                    .FontFamily("Arial")
22                    .FontSize(30, LengthType.Pt)
23                )
24            )
25            .AddG(g => g
26                .AddCircle(circle => circle.Cx(100).Cy(130).R(60).StrokeDashArray(2, 14))
27                .AddText("Rule Builder", x: 230, y: 140)
28            )
29            .Build(document.FirstChild as SVGSVGElement);
30
31        // Save the SVG document
32        document.Save(Path.Combine(OutputDir, "rule-builder.svg"));
33    }

Abschluss

Aspose.SVG für .NET bietet eine Rule Builder-Funktion, die es Entwicklern ermöglicht, CSS-Regeln für SVG-Elemente mithilfe der SVG Builder-API programmgesteuert zu definieren.

Die Verwendung der Klasse RuleBuilder vereinfacht das Erstellen und Anwenden von Stilen auf SVG-Elemente und erleichtert die Anpassung des Erscheinungsbilds von SVG-Grafiken in C#-Code.
RuleBuilder bietet Flexibilität und Kontrolle über das visuelle Erscheinungsbild von SVG-Elementen.
RuleBuilder fungiert als Builder im Builder, was die Erstellung komplexer Objekte oder Strukturen erleichtert und die Lesbarkeit des Codes verbessert, sodass er leichter verständlich ist.

Siehe auch

Der Artikel Element Builders befasst sich eingehend mit den Element Buildern, die in der SVG Builder API verwendet werden. Sie erfahren mehr über die SVGElementBuilder-Klasse, ihre speziellen Builder und wie sie die SVG-Programmierung vereinfachen.
Bitte lesen Sie den Artikel Path Builder, um mehr über die PathBuilder-Klasse zu erfahren, die die Erstellung und Bearbeitung von SVG-Pfaden vereinfachen soll. Der Artikel zeigt, wie der Path Builder eine intuitive Syntax zum programmgesteuerten Definieren von SVG-Pfaden bietet und es Entwicklern ermöglicht, den Prozess der Erstellung komplizierter Formen und Kurven zu optimieren.
Im Artikel Paint Builder geht es um PaintBuilder, eine Builder-Klasse zum Erstellen von Farbwerten für SVG-Elemente. Diese Klasse wird verwendet, um den Wert der Attribute stroke oder fill für verschiedene SVG-Formen und -Elemente anzugeben, wenn diese mit Farbe, Muster oder Farbverlauf gefüllt werden.

Path Builder Paint Builder