Element Builders – 使用 Fluent Builder API 在 C# 中创建 SVG 元素

Aspose.SVG Builder API 允许开发人员使用 fluent builder 语法在 C# 中以编程方式创建和编辑 SVG 元素。与手动构造 SVG XML 或直接操作 DOM 属性相比，Element Builders 提供了一种更清晰、更易维护的 SVG 生成方式。

Builder API 支持常见 SVG 元素，例如矩形、圆、路径、线、多边形、文本和组。通过嵌套 builders 和链式方法，开发人员可以用更少的样板代码生成复杂的 SVG 图形，并提升代码可读性。

本文介绍如何使用 Aspose.SVG for .NET 在 C# 中创建 SVG 元素、以编程方式构建 SVG 图形，以及修改现有 SVG 文档。您将了解 SVGElementBuilder 基类、 SVGSVGElementBuilder 类、专用元素 builders，以及它们如何简化 SVG 编程。

什么是 SVG Element Builders?

Element Builders 是用于以编程方式创建 SVG 元素的专用 builder 类。每个 builder 对应一个特定的 SVG 元素，并提供强类型方法来配置 SVG 属性和样式。

Builder API 支持:

• SVG 形状;
• 文本元素;
• 组;
• 路径;
• 样式;
• 变换;
• 可复用的 SVG 结构。

Fluent 语法简化了 SVG 生成，并提高了 .NET 应用程序中代码的可维护性。

支持的 SVG Element Builders

Builder	SVG 元素
SVGSVGElementBuilder	<svg>
SVGRectElementBuilder	<rect>
SVGCircleElementBuilder	<circle>
SVGLineElementBuilder	<line>
SVGPathElementBuilder	<path>
SVGTextElementBuilder	<text>
SVGGElementBuilder	<g>
SVGPolygonElementBuilder	<polygon>
SVGPolylineElementBuilder	<polyline>

完整的 SVG element builders 列表可在 API Reference Aspose.Svg.Builder 页面中查看。

创建新元素

Aspose.SVG SVG Builder API 使用 Fluent Builder Pattern，这种设计方法适合在 SVG 操作中实现简单、清晰和灵活的代码。

Fluent Builder Pattern

在 SVG Builder API 中，Fluent Builder Pattern 用于简化 SVG 元素的创建和更新，使过程更加直观并减少出错概率。该模式的核心是配置 SVG 元素并返回 builder 实例的方法，从而支持方法链调用。

在这种场景下，lambda 表达式可以提高 builder 配置方法的清晰度和简洁性。它们允许以详细但紧凑的方式定义 SVG 元素的属性和样式:

    using (SVGDocument document = new SVGDocument())
    {
        SVGSVGElement svgElement = new SVGSVGElementBuilder()
            .AddCircle(circle => circle
                .Cx(100).Cy(100).R(50)
                .Fill(Color.Red).Stroke(Paint.None)
                .StrokeWidth(2))
            .Build(document);
    }

这里，circle => circle.Cx(100).Cy(100).R(50).Fill(Color.Red).Stroke(Paint.None).StrokeWidth(2) 是配置圆心、半径、填充和描边的简洁方式。这种方法不仅简化了元素配置，还提高了代码的可读性和可维护性。

从头创建 SVG

下面展示一种使用 C# 从头创建 SVG 的简洁方法。

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

    // Create an SVG document from scratch using the SVG Builder API in C#

    // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(700).Height(300)
        .ViewBox(0, 0, 700, 300)

        .AddG(g => g
        .AddCircle(circle => circle.Cx(130).Cy(130).R(60).Fill(Paint.None).Stroke(Color.FromArgb(200, 0, 0)).StrokeWidth(70).StrokeDashArray(2, 14))
        .AddText("I can create SVG from scratch!", x: 270, y: 140, fontSize: 30, fill: Color.Teal)
        )
        .Build(document.FirstChild as SVGSVGElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
}

该示例使用 SVGSVGElementBuilder 中的 Fluent Builder Pattern 构建 SVG 元素。与 编辑 SVG 文件 文章中更依赖低层 DOM 操作和显式属性设置的方法相比，这种模式为生成 SVG 文档提供了一种极具表现力且易于维护的方式。此方法:

• 提供更流畅、更易读的方式来创建复杂结构;
• 减少样板代码，因为 cx、cy、r 和 fill 等属性可直接通过 builder 方法设置。

编辑 SVG

使用 Element Builders 是以编程方式编辑 SVG 的一种强大方法。

添加新元素

使用 Element Builders 编辑 SVG 为以编程方式操作矢量图形提供了灵活的方法。以下示例打开现有 SVG 文件，添加元素并保存:

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

// Add circle and polyline elements to an existing SVG using SVG Builder in C#

string documentPath = Path.Combine(DataDir, "circles.svg");

// Initialize an SVG document
using (SVGDocument document = new SVGDocument(documentPath))
{
    // Create a <circle> element with attributes
    SVGCircleElement circle = new SVGCircleElementBuilder()
     .Cx(350).Cy(70).R(50).Fill(Paint.None).Stroke(Color.FromArgb(80, 132, 132)).StrokeWidth(10)
     .Build(document);

    // Append the newly created <circle> element to the root <svg> element
    document.RootElement.AppendChild(circle);

    // Create a <polyline> element with attributes
    SVGPolylineElement polyline = new SVGPolylineElementBuilder()
    .Points(new double[] { 125, 130, 275, 180, 425, 130 }).Stroke(Color.FromArgb(80, 132, 132)).Fill(Paint.None).StrokeWidth(10)
    .Build(document);

    // Append the newly created <polyline> element to the root <svg> element
    document.RootElement.AppendChild(polyline);

    // Save the document
    document.Save(Path.Combine(OutputDir, "circles-edited.svg"));
}

在此示例中:

• 使用 SVGCircleElementBuilder 创建新的 <circle> 元素，并通过 fluent 方法配置 cx、cy、r、fill、stroke 和 stroke-width 属性。
• 使用 SVGPolylineElementBuilder 创建新的 <polyline> 元素，并以编程方式定义点和描边设置。
• 每个元素配置完成后， Build(Document document) 方法会构建该元素并将其返回，以便添加到文档中。
• 新创建的 <circle> 和 <polyline> 元素被追加为 SVG 文档根 <svg> 元素的子元素。

图 (a) 显示原始 circles.svg 文件，图 (b) 显示添加了圆和折线后的 circles-edited.svg 文件。

修改现有元素

在下面的 C# 示例中，我们通过更改文档中第一个 SVG <circle> 元素的填充和描边颜色来更新现有 SVG 文档:

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

// Modify an existing SVG circle element using SVG Builder in C#

string documentPath = Path.Combine(DataDir, "circles.svg");

// Initialize an SVG document
using (SVGDocument document = new SVGDocument(documentPath))
{
    // Assume an existing SVG element is part of the document
    SVGCircleElement circle = document.GetElementsByTagName("circle").First() as SVGCircleElement;

    // Modify the first <circle> element using SVGCircleElementBuilder
    new SVGCircleElementBuilder()
        .Stroke(Color.DarkRed).Fill(Color.LightGray)

        // The first <circle> element is now updated with new configurations
        .Build(circle);

    // Save the document
    document.Save(Path.Combine(OutputDir, "circles-modified.svg"));
}

Element Builders 提供 Build(T element) 方法，用于更新现有 SVG 元素并修改其属性或样式。图 (a) 显示原始 circles.svg 文件，图 (b) 显示第一个圆被重新着色后的 circles-modified.svg 文件。

使用 Element Builders 的示例

以下代码片段展示如何使用 Element Builders 创建包含各种 SVG 形状元素的 SVG 文档。

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

// Create basic SVG shapes programmatically using SVG Builder in C#

string svgContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"></svg>";
using (SVGDocument document = new SVGDocument(svgContent, "."))
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
        .ViewBox(0, 0, 800, 800)

            .AddG(g => g.FontSize(20).TextAnchor(TextAnchor.End)
                .AddText("<rect>", y: 30)
                .AddText("<circle>", y: 70)
                .AddText("<ellipse>", y: 110)
                .AddText("<line>", y: 150)
                .AddText("<polyline>", x: 300, y: 30)
                .AddText("<polygon>", x: 300, y: 70)
                .AddText("<path>", x: 300, y: 110)
                )

            .AddG(gg => gg.Fill(Color.Teal).StrokeWidth(3)
                .AddRect(r => r.X(35).Y(5).Width(30).Height(30))
                .AddCircle(c => c.Cx(50).Cy(60).R(17))
                .AddEllipse(e => e.Cx(50).Cy(100).Rx(25).Ry(12))
                .AddLine(l => l.X1(30).X2(70).Y1(140).Y2(140).Stroke(Color.Teal))
                )
            .AddG(ggg => ggg.Fill(Paint.None).StrokeWidth(3).Stroke(Color.Teal).Transform(t => t.Translate(300, -160))
                .AddPolygon(points: new double[] { 30, 215, 90, 215, 120, 230, 70, 240, 30, 215 }, fill: Color.Teal)
                .AddPolyline(points: new double[] { 30, 200, 65, 170, 90, 190, 120, 180 })
                .AddPath(d: path => path.M(30, 275).Q(55, 250, 70, 250).T(80, 275).T(120, 260))
                )

        .Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "svg-elements.svg"));
}

Element Builders 提供流畅且表达性强的语法来构建 SVG 元素，从而提高代码的可读性和可维护性。在此示例中，SVGSVGElementBuilder 构建带有 width、height 和 viewBox 属性的 SVG 元素。随后使用 Fluent Builder Pattern 创建矩形、圆、椭圆、线、折线、多边形和路径，并在 <g> 元素中设置位置和样式。

为什么使用 Fluent SVG Builders?

DOM 操作	Builder API
手动处理属性	强类型方法
代码更冗长	Fluent 链式语法
更难维护	更易阅读
重复 XML 操作	可复用的 builder 逻辑

FAQ

1. 为什么开发人员使用 Builder APIs 而不是直接生成 XML?
Builder APIs 使用类型化 fluent 方法替代手动 XML 构造，使 SVG 代码更易阅读、维护和扩展。

2. 生成的 SVG 是否符合标准?
是。Aspose.SVG 生成基于标准的 SVG 标记，并与现代 SVG 渲染引擎兼容。

3. 可以使用 Element Builders 生成交互式 SVG 图形吗?
可以。生成的 SVG 元素之后可以在 Web 应用程序中使用 CSS 和 JavaScript 进行样式设置、动画处理或操作。

4. 生成的 SVG 图形可以直接嵌入 HTML 页面吗?
可以。使用 Aspose.SVG 创建的 SVG 文档可以内联嵌入 HTML，也可以作为独立 SVG 文件使用。

常见错误和修复

问题	可能原因	建议修复
SVG 元素不可见	缺少填充或描边	应用 Fill() 或 Stroke()
SVG 更改未保存	修改后未保存文档	更新后调用 document.Save()
元素出现在画布之外	坐标或 viewBox 不正确	检查 SVG 尺寸和位置
现有元素未更新	元素引用不正确	确保正确获取目标 SVG 元素
形状显示变形	viewBox 比例无效	使用一致的 SVG 坐标系统

相关资源

• SVG Builder API 文章介绍了如何使用 Aspose.SVG Builder API 在 C# 中以编程方式创建和操作 SVG 元素。了解 fluent builders 如何简化 SVG 生成并提高 .NET 应用程序中的代码可读性。
• 在 编辑 SVG 文件 文章中，您可以学习如何使用 Aspose.SVG for .NET 库编辑 SVG，并查看关于如何向 SVG 文档添加元素并进行编辑的详细 C# 示例。
• 请访问 Path Builder 文章，了解如何使用 Path Builder 以编程方式创建 SVG 路径，这是一组通过结合 SVG 直线、SVG 圆弧和贝塞尔曲线来绘制各种轮廓或形状的命令。
• Rule Builder 文章介绍了 RuleBuilder 类，这是一个用于在 SVG 文档中构建 CSS 样式规则的 builder 类。
• Paint Builder 文章介绍了 PaintBuilder，这是一个用于为 SVG 元素创建 paint 值的 builder 类。该类用于在为各种 SVG 形状和元素填充颜色、图案或渐变时，指定 stroke 或 fill 属性的值。