Rule Builder – 在 C# 中创建 SVG CSS 规则

C# 中的 SVG 样式规则

SVG 文档通过 <style> 元素支持 CSS 样式，因此开发人员可以将可复用的视觉规则应用到 SVG 图形。使用 Aspose.SVG Builder API，您可以在 C# 中以编程方式配置 SVG 样式，而无需手动编写 CSS 字符串。

本文介绍如何在 C# 中创建 SVG 样式规则、将 CSS 选择器应用到 SVG 元素、配置自定义字体，以及使用 Aspose.SVG for .NET 以编程方式管理可复用的 SVG 样式。

什么是 RuleBuilder?

RuleBuilder 是 Aspose.SVG Builder API 的一部分，用于以编程方式配置 SVG 样式规则中的 CSS 声明。它与 SVGStyleElementBuilder 一起使用，使开发人员能够:

• 创建 SVG <style> 元素;
• 定义可复用的 CSS 选择器;
• 配置 SVG 填充和描边样式;
• 应用字体排版设置;
• 为 SVG 图形创建可复用的视觉主题。

集中管理 CSS 规则可以简化 SVG 维护，并减少重复的样式代码。

在 C# 中创建 SVG 样式规则

Aspose.SVG Builder API 提供 SVGStyleElementBuilder 类，它是用于构造 SVG <style> 元素的元素 builder。该类便于创建和配置带有 CSS 规则的 SVG <style> 元素。

此示例展示如何创建 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() 方法在生成的样式规则中设置 font-family CSS 属性。它指定用于匹配文本元素的字体名称。
• RuleBuilder 类的 Attribute() 方法在 @font-face 规则内设置 src CSS 描述符，并提供字体文件的源 URL。

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

AddRule() 方法

AddRule() 方法属于 SVGStyleElementBuilder，用于在 SVG 文档中创建 CSS 规则。它接受两个参数: CSS 选择器名称，以及使用 RuleBuilder 定义样式属性的 lambda 表达式。

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

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

Builders within Builders

SVG Builder API 引入了语法糖 (syntactic sugar)，以进一步完善 SVG 创建和操作的过程。这包括针对各种 SVG 元素的嵌套 builder，提供了一种更直观、更高效的方式来定义复杂的 SVG 结构。“builder within a builder”模式涉及使用多个 builder 类，其中一个 builder 嵌套在另一个 builder 中，以方便构建复杂的对象或结构。

以下代码片段演示如何使用 RuleBuilder 作为 builder 内部 builder 的示例，以编程方式创建 SVG 图形并设置其样式:

• 在 SVGSVGElementBuilder 中，使用 AddStyle() 方法添加样式块。
• SVGStyleElementBuilder 的 AddRule() 方法按选择器定义 CSS 规则，例如 “circle” 或 “text”。在每个 lambda 表达式中， RuleBuilder 配置填充颜色、描边颜色和字体系列等声明，并将其应用到匹配的 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"));
}

样式规则如何工作

AddRule() 方法在 SVG <style> 元素中创建可复用的 CSS 规则。在此示例中:

• "circle" 选择器为所有 SVG circle 元素设置样式;
• "text" 选择器配置 SVG 文本的排版;
• 样式规则会自动应用于匹配的 SVG 元素。

这种方法将样式逻辑与 SVG 结构分离，并提高 SVG 的可读性。

常见错误和修复

问题	可能原因	建议修复
SVG 样式未应用	CSS 选择器不正确	确保 AddRule() 指向正确的 SVG 元素
自定义字体未显示	字体 URL 无效	检查字体文件路径和可访问性
文本渲染在不同系统中不同	所需字体不可用	使用嵌入字体或 Web 加载字体
SVG 元素忽略样式规则	Inline 属性覆盖 CSS	移除冲突的 inline 样式
缺少描边或填充样式	样式属性配置不正确	检查 Fill() 和 Stroke() 规则

FAQ

1. RuleBuilder 是否比 SVG inline 样式更好?
对于复杂 SVG 图形，可复用的 CSS 规则通常比重复的 inline 属性更易维护。Rule Builder 有助于集中管理 SVG 样式逻辑并减少重复代码。

2. 可以使用 RuleBuilder 设置 SVG 类和 ID 的样式吗?
可以。AddRule() 支持标准 CSS 选择器，包括元素选择器、类选择器和 ID 选择器。

3. 为什么在 SVG 内部使用 CSS 规则，而不是外部 CSS 文件?
嵌入式 SVG 样式使 SVG 图形自包含，更便于在应用程序、导出文件和独立 SVG 文件中复用。

4. 可以为多个元素复用同一个 SVG 样式块吗?
可以。单个 SVG <style> 块可以通过共享选择器将可复用规则应用到多个 SVG 元素。

相关资源

• 在 C# 中以编程方式修改 SVG 样式 文章介绍了如何使用 Aspose.SVG，通过基于 DOM 的操作和属性重写，在 C# 中以编程方式修改和规范化 SVG 样式。
• Element Builders 文章深入探讨了 SVG Builder API 中使用的 Element Builders。您将了解 SVGElementBuilder 类及其专门的 builders，以及它们如何简化 SVG 编程。
• 请参阅 Path Builder 文章，详细了解旨在简化 SVG 路径创建和操作的 PathBuilder 类。该文章展示了 Path Builder 如何为以编程方式定义 SVG 路径提供直观的语法，使开发人员能够简化创建复杂形状和曲线的过程。
• Paint Builder 文章介绍了 PaintBuilder，它是用于为 SVG 元素创建 paint 值的 builder 类。此类用于在为各种 SVG 形状和元素填充颜色、图案或渐变时指定其 stroke 或 fill 属性的值。
• SVG Builder API 文章解释了 SVG Builder API 如何在操作 SVG 时解决复杂性、代码清晰度和多功能性方面的挑战。