Rule Builder – SVG-CSS-Regeln in C# erstellen

SVG Style Rules in C#

SVG-Dokumente unterstützen CSS-Styling über das <style>-Element. Dadurch können Entwickler wiederverwendbare visuelle Regeln auf SVG-Grafiken anwenden. Mit der Aspose.SVG Builder API können SVG-Stile in C# programmgesteuert konfiguriert werden, ohne CSS-Strings manuell zu schreiben.

Dieser Artikel erklärt, wie Sie SVG-Stilregeln in C# erstellen, CSS-Selektoren auf SVG-Elemente anwenden, benutzerdefinierte Schriften konfigurieren und wiederverwendbare SVG-Stile mit Aspose.SVG for .NET programmgesteuert verwalten.

Was ist RuleBuilder?

RuleBuilder ist Teil der Aspose.SVG Builder API und wird verwendet, um CSS-Deklarationen für SVG-Stilregeln programmgesteuert zu konfigurieren. Zusammen mit SVGStyleElementBuilder können Entwickler:

SVG-<style>-Elemente erstellen;
wiederverwendbare CSS-Selektoren definieren;
SVG-Füll- und Konturstile konfigurieren;
Typografieeinstellungen anwenden;
wiederverwendbare visuelle Themes für SVG-Grafiken erstellen.

Zentralisierte CSS-Regeln vereinfachen die Wartung von SVG und reduzieren doppelte Styling-Logik.

SVG-Stilregeln in C# erstellen

Aspose.SVG Builder API bietet die Klasse SVGStyleElementBuilder, einen Element-Builder zum Erstellen eines SVG-<style>-Elements. Diese Klasse erleichtert das Erstellen und Konfigurieren eines SVG-<style>-Elements mit CSS-Regeln.

Dieses Beispiel zeigt, wie ein SVG-<style>-Element erstellt, eine CSS-Regel @font-face hinzugefügt und die Methode AddRule() verwendet wird, um Schriftstile für Textelemente in einem SVG-Dokument zu definieren:

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

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

Example-ConfigureSvgStyleUsingRuleFontFace.cs hosted with ❤ by GitHub

Visualisierung der Datei font-face.svg

@font-face-Regel

Die CSS-Regel @font-face ermöglicht es, Schriften für Text festzulegen, die von einem Remote-Server oder vom Computer des Benutzers geladen werden können. Die Regel definiert einen benutzerdefinierten Namen der Schriftfamilie und gibt die Quell-URL der Schriftdatei an.

Die Methode FontFamily() setzt die CSS-Eigenschaft font-family in der generierten Stilregel. Sie gibt den Schriftnamen an, der für passende Textelemente verwendet wird.
Die Methode Attribute() der Klasse RuleBuilder setzt den CSS-Deskriptor src innerhalb der @font-face-Regel mit der Quell-URL der Schriftdatei.

Im obigen Beispiel definiert die @font-face-Regel eine benutzerdefinierte Schriftfamilie namens "VeinlineRegular". Diese Regel stellt sicher, dass die Schrift geladen wird und im SVG-Dokument verfügbar ist.

AddRule()-Methode

Die Methode AddRule() gehört zu SVGStyleElementBuilder und ermöglicht das Erstellen von CSS-Regeln in SVG-Dokumenten. Sie nimmt zwei Parameter: den Namen des CSS-Selektors und einen Lambda-Ausdruck, der die Eigenschaften des Stils mit RuleBuilder definiert.

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

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

Builders within Builders

Die SVG Builder API führt syntaktischen Zucker (syntactic sugar) ein, um den Prozess der SVG-Erstellung und -Manipulation weiter zu verfeinern. Dies beinhaltet verschachtelte Builder für verschiedene SVG-Elemente, was eine intuitivere und effizientere Art bietet, komplexe SVG-Strukturen zu definieren. Ein „builder within a 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 RuleBuilder als Beispiel für einen Builder innerhalb eines Builders verwendet wird, um SVG-Grafiken programmgesteuert zu erstellen und zu formatieren:

Innerhalb von SVGSVGElementBuilder wird mit AddStyle() ein Stilblock hinzugefügt.
Die Methode AddRule() von SVGStyleElementBuilder definiert CSS-Regeln nach Selektor, z. B. “circle” oder “text”. Innerhalb jeder Lambda-Expression konfiguriert RuleBuilder Deklarationen wie Füllfarbe, Konturfarbe und Schriftfamilie für passende SVG-Elemente.

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

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

Example-CreateStyledSvgWithRuleBuilderApi.cs hosted with ❤ by GitHub

Wie die Stilregeln funktionieren

Die Methode AddRule() erstellt wiederverwendbare CSS-Regeln im SVG-<style>-Element. In diesem Beispiel:

formatiert der Selektor "circle" alle SVG-Kreis-Elemente;
konfiguriert der Selektor "text" die Typografie für SVG-Text;
werden Stilregeln automatisch auf passende SVG-Elemente angewendet.

Dieser Ansatz trennt Styling-Logik von der SVG-Struktur und verbessert die Lesbarkeit des SVG.

Häufige Fehler und Lösungen

Problem	Mögliche Ursache	Empfohlene Lösung
SVG-Stile werden nicht angewendet	Falscher CSS-Selektor	Sicherstellen, dass `AddRule()` das richtige SVG-Element adressiert
Benutzerdefinierte Schrift wird nicht angezeigt	Ungültige Schrift-URL	Pfad und Erreichbarkeit der Schriftdatei prüfen
Textrendering unterscheidet sich je nach System	Benötigte Schrift ist nicht verfügbar	Eingebettete oder webgeladene Schriften verwenden
SVG-Elemente ignorieren Stilregeln	Inline-Attribute überschreiben CSS	Konfliktierende Inline-Stile entfernen
Kontur- oder Füllstile fehlen	Falsche Konfiguration der Style-Eigenschaft	`Fill()`- und `Stroke()`-Regeln prüfen

FAQ

1. Ist RuleBuilder besser als Inline-SVG-Styling?
Für komplexe SVG-Grafiken sind wiederverwendbare CSS-Regeln meistens leichter zu warten als wiederholte Inline-Attribute. Rule Builder hilft, SVG-Styling zu zentralisieren und doppelten Code zu reduzieren.

2. Kann ich SVG-Klassen und IDs mit RuleBuilder stylen?
Ja. AddRule() unterstützt Standard-CSS-Selektoren, einschließlich Element-, Klassen- und ID-Selektoren.

3. Warum CSS-Regeln im SVG statt externer CSS-Dateien verwenden?
Eingebettete SVG-Stile machen SVG-Grafiken eigenständig und einfacher in Anwendungen, Exporten und eigenständigen SVG-Dateien wiederverwendbar.

4. Kann ich denselben SVG-Stilblock für mehrere Elemente wiederverwenden?
Ja. Ein einzelner SVG-<style>-Block kann wiederverwendbare Regeln über gemeinsame Selektoren auf mehrere SVG-Elemente anwenden.