规则生成器 – Rule Builder – 配置 SVG 样式 – C#

SVG风格 – SVG Style

SVG <style> 元素用于定义 SVG 文档中的内部样式。它允许开发人员将 CSS 规则直接应用于 SVG 元素，从而提供一种便捷的方法来控制 SVG 图形的外观。

Aspose.SVG Builder API 提供了 SVGStyleElementBuilder 类，它是一个用于构造 SVG <style> 元素的元素生成器。此类有助于使用 CSS 规则创建和配置 SVG <style> 元素。

本文介绍的是 RuleBuilder 类，它是一个用于构造 CSS 样式规则的构建器类。该类用于通过设置各种属性及其值来动态构建 CSS 样式字符串。

规则生成器 - RuleBuilder 类

规则生成器使开发人员能够在 C# 代码中以编程方式应用 SVG 文档的 CSS 规则，从而提供对 SVG 元素视觉外观的灵活性和控制。此示例演示如何创建 SVG <style> 元素，向其添加 CSS 规则 @font-face，并使用 AddRule() 方法定义 SVG 文档中文本元素的字体样式：

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

 1// Configure an SVG document's style with external font-face rules in C# using Rule Builder
 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

文本"font-face.svg 文件可视化"

@font-face 规则

@font-face CSS 规则允许您指定在网页上显示文本的字体，这些字体可以从远程服务器或用户计算机下载。该规则定义自定义字体系列名称并指定字体文件的源 URL。

FontFamily() 方法为 SVG 元素设置font-family属性。它指定将用于设置字体属性的字体名称。
RuleBuilder 类的 Attribute() 方法使用字体文件的源 URL 为<style>元素设置scr属性。

在上面的示例中，@font-face 规则定义了一个名为"VeinlineRegular"的自定义字体系列。此规则可确保字体已加载并可在 SVG 文档中使用。

AddRule() 方法

AddRule() 方法是规则生成器的一部分，它允许您在 SVG 文档中创建 CSS 规则。它需要两个参数：CSS 选择器的名称和使用 RuleBuilder 定义样式属性的 lambda 表达式。

在上面的 C# 示例中，添加了两条规则：

第一个规则定义了@font-face规则，它保证了VeinlineRegular字体的可用性。
第二条规则应用 VeinlineRegular 字体系列，并将 SVG 中所有文本元素的字体大小设置为 30 磅。

建设者中的建设者

SVG Builder API 引入了语法糖来进一步细化 SVG 创建和操作的过程。这包括各种 SVG 元素的嵌套构建器，提供更直观、更有效的方式来定义复杂的 SVG 结构。构建器中的构建器模式涉及使用多个构建器类，其中一个构建器嵌套在另一个构建器中，以方便构建复杂的对象或结构。

以下代码片段演示了如何使用RuleBuilder(构建器中的构建器示例)以编程方式创建 SVG 图形并设置其样式：

在 SVGSVGElementBuilder 内，使用 AddStyle() 方法添加样式块。
在 RuleBuilder 中，使用 AddRule() 方法定义 CSS 规则，指定选择器(例如"circle"、“text”)并应用属性(例如填充颜色、描边颜色、字体系列)来定位 SVG 元素。

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

 1// Create SVG with styled circle and text elements using C# Rule Builder API and fluent syntax
 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

结论

Aspose.SVG for .NET 提供了规则生成器功能，允许开发人员使用 SVG Builder API 以编程方式定义 SVG 元素的 CSS 规则。

使用 RuleBuilder 类简化了创建样式并将样式应用于 SVG 元素的过程，从而可以轻松地在 C# 代码中自定义 SVG 图形的外观。
RuleBuilder 提供了对 SVG 元素视觉外观的灵活性和控制。
RuleBuilder 充当构建器中的构建器，这使得创建复杂的对象或结构变得更加容易，并提高了代码的可读性，使其更容易理解。

也可以看看

元素生成器 文章深入研究了 SVG Builder API 中使用的元素生成器。您将了解 SVGElementBuilder 类、其专用构建器以及它们如何简化 SVG 编程。
请参阅 Path Builder 文章，了解有关 PathBuilder 类的更多信息，该类旨在简化 SVG 路径的创建和操作。本文展示了路径生成器如何提供直观的语法来以编程方式定义 SVG 路径，使开发人员能够简化创建复杂形状和曲线的过程。
Paint Builder 文章介绍 PaintBuilder，这是一个用于为 SVG 元素创建绘制值的构建器类。此类用于在使用绘画、图案或渐变填充各种 SVG 形状和元素时指定其stroke或fill属性的值。

Path Builder Paint Builder