规则生成器 – 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 文档中文本元素的字体样式：

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

// Configure an SVG document's style with external font-face rules in C# using Rule Builder

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element and use Builder API to add other rules and elements to it
    SVGSVGElement svg = new SVGSVGElementBuilder()
        
       .AddDefs(def => def
            .AddStyle(st => st
                .Type("text/css")
                .AddRule("@font-face", r => r
                    .FontFamily("VeinlineRegular")
                    .Attribute("src", "url(https://assets.ithillel.ua/wiki/VeinlineRegular.ttf)")
                )
                .AddRule("text", t => t
                    .FontFamily("VeinlineRegular")
                    .FontSize(30, LengthType.Pt)
                )
            )
        )
            .AddText(t => t
            .X(20).Y(60).Fill(Color.DarkRed).FontWeight(FontWeight.Bold)
            .AddContent("Configure SVG Style")
            )
            .AddText(t => t
            .X(20).Y(150)
            .AddContent("Set your SVG style with Rule Builder!")
            )
        .Build(document.FirstChild as SVGSVGElement);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "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 元素。

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

// Create SVG with styled circle and text elements using C# Rule Builder API and fluent syntax

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element and use Builder API to add other rules and elements to it
    SVGSVGElement svg = new SVGSVGElementBuilder()
       
        .AddStyle(st => st
            .AddRule("circle", r => r
                .Fill(paint: Paint.None)
                .Stroke(color: Color.DarkRed)
                .StrokeWidth(60)
            )
            .AddRule("text", t => t
                .Fill(color: Color.Red)
                .Stroke(color: Color.Teal)
                .StrokeWidth(1)
                .FontFamily("Arial")
                .FontSize(30, LengthType.Pt)
            )
        )
        .AddG(g => g
            .AddCircle(circle => circle.Cx(100).Cy(130).R(60).StrokeDashArray(2, 14))
            .AddText("Rule Builder", x: 230, y: 140)
        )
        .Build(document.FirstChild as SVGSVGElement);

    // Save the SVG document
    document.Save(Path.Combine(OutputDir, "rule-builder.svg"));
}

结论

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属性的值。