用 SVG 手撸一个流程图

2023-12-23 10:28:55

在纷繁复杂的 IT 世界中，流程图已成为可视化和传达复杂流程的不可或缺的工具。从软件开发到业务建模，流程图帮助我们整理思路、促进沟通并简化决策制定。

然而，使用传统工具（例如 Visio 或 Lucidchart）创建流程图可能会很耗时且昂贵。幸运的是，借助 Scalable Vector Graphics (SVG) 的强大功能，我们可以轻松地创建和自定义自己的流程图，而无需任何专有软件。

SVG 简介

SVG 是一种基于 XML 的矢量图形格式，非常适合创建可缩放、交互式和可编辑的图形。它广泛用于 Web 开发、印刷和动画。由于其基于文本的性质，SVG 可以很容易地与其他技术（如 HTML、CSS 和 JavaScript）集成，从而提供了高度的灵活性。

从头开始用 SVG 创建流程图

要使用 SVG 手动创建流程图，我们需要了解流程图中的基本元素：

形状： 流程图通常由矩形、菱形和圆形等形状组成，这些形状表示流程的各个步骤、决策点和终点。
连接器： 这些是将形状连接起来的线条，指示流程的流向。
文本： 用于标签形状和连接器，提供有关流程的附加信息。

使用 SVG 创建形状

在 SVG 中，形状是用 <path> 元素创建的。该元素具有一个 d 属性，用于定义形状的路径。以下示例显示了如何创建流程图中的常见矩形：

<path d="M 0 0 L 100 0 L 100 50 L 0 50 Z" />

创建连接器

连接器是用 <line> 元素创建的。该元素具有 x1、y1、x2 和 y2 属性，用于指定直线的端点坐标。以下示例显示了如何创建一条连接两个矩形的线：

<line x1="0" y1="25" x2="100" y2="25" />

添加文本

文本是用 <text> 元素添加的。该元素具有 x、y、font-size 和 text-anchor 属性，用于控制文本的位置和对齐方式。以下示例显示了如何为形状添加标签：

<text x="50" y="25" font-size="12" text-anchor="middle">步骤 1</text>

SVG 流程图示例

将这些元素结合起来，我们可以创建一个简单的 SVG 流程图：

<svg width="500" height="300">
  <path d="M 50 50 L 200 50 L 200 100 L 50 100 Z" fill="yellow" />
  <text x="125" y="75" font-size="12" text-anchor="middle">步骤 1</text>
  <line x1="200" y1="75" x2="250" y2="75" />
  <path d="M 250 50 L 400 50 L 400 150 L 250 150 Z" fill="blue" />
  <text x="325" y="100" font-size="12" text-anchor="middle">步骤 2</text>
</svg>