Path Builder – 在 C# 中创建 SVG Paths

使用 Aspose.SVG 创建 SVG Path

SVG paths 是创建自定义矢量图形、曲线、轮廓和复杂形状的强大 SVG 功能之一。使用 Aspose.SVG Builder API，开发人员可以在 C# 中以可读的 fluent syntax 以编程方式创建 SVG path elements，而无需手动编写 SVG path data 字符串。

本文介绍如何在 C# 中创建 SVG paths、以编程方式构建复杂矢量图形，以及使用 Aspose.SVG for .NET 创建 SVG text paths。

Path Builder

PathBuilder 类通过常见 SVG path commands 的方法简化 SVG paths 创建，例如 M、L、C、Q、A 和 Z。

Aspose.SVG Builder API 提供 SVGPathElementBuilder 类，用于以编程方式构造 SVG <path> 元素。使用 PathBuilder，开发人员可以通过 fluent chained methods 定义 SVG path commands。

SVG paths 常用于:

• 矢量插图;
• 自定义形状;
• 图标;
• 图表;
• 曲线和轮廓;
• text path 效果。

Builders within Builders

SVG Builder API 使用嵌套 builders 来直观地定义复杂 SVG 结构。在下面的代码片段中，PathBuilder 是 builder within a builder 的示例: SVGSVGElementBuilder 创建 <svg> 元素，而 PathBuilder 构建内部 <path> 元素。

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

// Create an SVG path element with line commands programmatically in C# using SVG Path Builder

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element with specified width, height and viewBox, and add a <path> element to it
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(200).Height(200)
        .ViewBox(0, 0, 150, 150)

        .AddPath(p => p
        // 'D' method defines the 'd' attribute, which contains the path data
        .D(d => d
        // 'M' sets the starting point of the path (Move to x=50, y=50)
        .M(50, 50)
        // 'L' draws a line from the current point to the new point (Line to x=100, y=50)
        .L(100, 50)
        // Another 'L' to draw a line to a new point (Line to x=100, y=100)
        .L(100, 100)
        // 'Z' closes the path by drawing a line to the starting point
        .Z())
        // Sets the fill color of the path to teal 
        .Fill(Color.Teal))
        .Build(document.FirstChild as SVGSVGElement);

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

Path 如何工作

在此示例中， AddPath() 定义 <path> 元素。 D() 方法使用 SVG path commands 定义 SVG path data:

• M(50, 50) 将绘制光标移动到起点;
• L(100, 50) 创建线段;
• Z() 关闭 path。

Fluent syntax 简化 SVG path 生成，并使 path 定义更易读和维护。

PathBuilder 支持的 SVG Path Commands

PathBuilder 支持绝对和相对 SVG path commands，用于以编程方式创建线条、曲线、弧线和复杂矢量图形。

Command	Relative Command	描述
M	m	移动当前点
L	l	绘制直线
H	h	绘制水平线
V	v	绘制垂直线
C	c	绘制三次 Bézier 曲线
S	s	绘制平滑三次 Bézier 曲线
Q	q	绘制二次 Bézier 曲线
T	t	绘制平滑二次 Bézier 曲线
A	a	绘制椭圆弧
Z	z	关闭当前 path

添加自定义 SVG Path Data

Path data 也可以使用 AddPathSegment() 方法直接以字符串形式添加。

.D(d => d.AddPathSegment(
    "M199 89 C206 66 235 25 270 30 286 38 298 59 310 73"
))

当导入现有 SVG path data 或使用外部生成的 SVG 图形时，此方法很有用。

创建 SVG Curves 和 Bézier Paths

SVG paths 支持二次和三次 Bézier curves，可用于创建平滑矢量图形和复杂轮廓。

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

using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element with specified width, height and viewBox, and add a <path> element to it
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(500).Height(500)
        .ViewBox(0, 0, 400, 400)

        .AddPath(p => p
            .D(d => d
            .M(80, 210)
            .Q(95, 110, 200, 200)
            .T(350, 200)
        )
        // Sets the fill color of the path to red
        .Fill(Color.Red))
        .Build(document.FirstChild as SVGSVGElement);

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

在此示例中:

• Q() 创建二次 Bézier 曲线;
• T() 自动继续平滑曲线。

Curve commands 常用于插图、图表、签名和装饰性 SVG 图形。

SVG TextPath

SVG 可以沿 <path> 元素定义的 path 放置文本。这通过带有 href 属性的 <textPath> 元素实现。

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

// Create SVG text path in C# using SVG Builder

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element with specified width, height, and viewBox, and add into it <path> elements
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(1200).Height(300)
        .ViewBox(0, 0, 1200, 300)

        .AddPath(p => p.Id("Path1")
            .Fill(f => f.None()).Stroke(Color.IndianRed).Transform(t => t.Translate(-100, 40))
            .D(d => d.AddPathSegment("M 199 89 C 206 66 235 25 270 30 286 38 298 59 310 73 321 87 338 99 356 103 387 111 396 90 410 85"))
         )

        .AddPath(p => p.Id("Path2")
            .Fill(f => f.None()).Stroke(Paint.None).Transform(t => t.Translate(400, -100))
            .D(d => d.M(80, 210).Q(95, 110, 200, 200).T(400, 200)))


         .AddText(t => t.FontSize(30).Fill(Color.Teal)
             .AddTextPath(tp => tp
                 .Href("#Path1")
                 .AddContent("SVG textPath element")
              )
             .AddTextPath(tp => tp
                  .Href("#Path2")
                  .AddContent("SVG can place text along a path")
              )
         )

        .Build(document.FirstChild as SVGSVGElement);

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

在示例中，我们创建两个具有不同 id 属性的 paths。第一个 path 使用 AddPathSegment()，第二个 path 使用 M()、Q() 和 T()。SVG <textPath> 元素引用 <path> 的 id，从而沿该 path 显示文本:

这里也使用 builders within builders: SVGSVGElementBuilder 创建 <svg>，嵌套 builders 添加 <path>、<text> 和 <textPath>。

常见错误和修复

问题	可能原因	建议修复
SVG path 不可见	缺少 fill 或 stroke 样式	应用 Fill() 或 Stroke()
Path 形状不完整	Path 未关闭	使用 Z()
文本没有沿曲线排列	Path 引用不正确	确保 Href() 与 Id() 匹配
曲线显示变形	控制点坐标不正确	调整 Bézier 曲线控制点
导入的 path data 无法正确渲染	SVG path 语法无效	导入前验证 SVG path 字符串

Quick Recipes

1. 创建简单三角形

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(200).Height(200)
        .ViewBox(0, 0, 150, 150)
        .AddPath(p => p
            .D(d => d
            .M(50, 150)
            .L(150, 150)
            .L(100, 50)
            .Z())
        .Fill(Color.Teal))
        .Build(document.FirstChild as SVGSVGElement);
    document.Save("triangle.svg");
}

2. 添加 path segment

    .AddPath(p => p
        .Fill(Color.IndianRed)
        .D(d => d.AddPathSegment("M10 75 Q150 0 290 75"))
        )

3. 组合多个 segments

    .AddPath(p => p
    .Fill(Color.CadetBlue)
    .Stroke(Color.Red)
    .StrokeWidth(2)
    .D(d => d
        .AddPathSegment("M40 120")
        .AddPathSegment("C70 20 140 20 170 120")
        .AddPathSegment("S270 220 300 120")
        .AddPathSegment("Q250 180 170 170")
        .AddPathSegment("Q90 160 40 120")
        )
    )

Note: 第一个 recipe 与本文前面显示的 using directives 一起使用时是完整示例。其他 recipes 是应整合到完整 SVG 创建流程中的代码片段。

FAQ

1. PathBuilder 是否比手写 SVG path strings 更好?
对于复杂 SVG 图形，PathBuilder 通常比手动拼接 path strings 更易维护和调试。

2. 为什么使用 SVG paths 而不是基本 shapes?
SVG paths 比 <rect> 或 <circle> 更灵活，可表示复杂矢量图形、曲线和复合形状。

3. 可以将现有 SVG path data 转换为 PathBuilder commands 吗?
可以。现有 d 属性值可转换为 fluent PathBuilder commands，或使用 AddPathSegment() 直接插入。

4. SVG paths 是否与分辨率无关?
是。SVG paths 是矢量图形，可无损缩放。

5. 一个 SVG path 可以包含多个不连续形状吗?
可以。通过在同一个 path 中使用多个 M commands，可以包含多个 subpaths。

6. 相对和绝对 SVG path commands 有什么区别?
绝对 commands 使用固定 SVG 坐标，相对 commands 根据当前绘制点计算位置。

相关资源

• 请访问 SVG Path Data 了解 SVG paths 和 path commands。
• 在 编辑 SVG 文件 中，您可以学习如何使用 Aspose.SVG for .NET 编辑 SVG paths。
• Element Builders 文章介绍 SVG Builder API 中的 Element Builders。
• Rule Builder 文章介绍如何在 SVG 中创建 CSS style rules。
• Paint Builder 文章介绍用于 stroke 和 fill 值的 PaintBuilder。