5. path路径绘制：使用path绘制线段

SVG的 path 元素是一种灵活的方式来创建图形，它可以通过一系列的命令和参数来定义形状。在SVG中，绘制线段主要使用 M (moveto) 、 L (lineto) 、 H (HorizontalLineTo)、 V(VerticalLineTo)、Z(ClosePath)命令。

M命令：移动到

M 命令用于将画笔移动到画布上的新位置，不绘制任何内容。它的参数是一个坐标对 (x,y)，表示新位置的绝对坐标。

<path d="M 10 10" />

上面的代码将画笔移动到坐标 (10,10)。

L命令：绘制直线

L 命令用于从当前位置绘制一条直线到新位置。它的参数也是一个坐标对 (x,y)，表示线段终点的绝对坐标。

<path d="M 10 10 L 20 20"  stroke="blue"/>

上面的代码从 (10,10) 绘制一条线到 (20,20)。

H命令：水平线

H 命令用于从当前点绘制一条水平线到指定的x坐标。它只需要一个参数，即x坐标值。

<path d="M 10 10 H 30"  stroke="blue"/>

上面的代码从 (10,10) 绘制一条水平线到 (30,10)。

V命令：垂直线

V 命令用于从当前点绘制一条垂直线到指定的y坐标。它只需要一个参数，即y坐标值。

<path d="M 10 10 V 30"  stroke="blue"/>

上面的代码从 (10,10) 绘制一条垂直线到 (10,30)。

Z命令：闭合路径

Z 命令用于闭合路径，将当前点与路径的起始点连接起来。它没有参数。

<path d="M 10 10 L 20 20 L 10 20 Z"  stroke="blue"/>

上面的代码绘制了一个三角形，并通过 Z 命令闭合路径。

小写命令的意义

当 H、V 和 L 命令以小写字母书写时（即 h、v 和 l），它们表示相对于当前点的位置，而不是绝对坐标。

下面是一个包含 h、v 和 l 命令的SVG示例，展示了如何使用这些命令来绘制一个简单的图形。

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- 移动到 (10,10) -->
  <path d="M 10 10
           h 40   <!-- 从当前点水平移动40个单位 -->
           v 40   <!-- 从当前点垂直移动40个单位 -->
           l -40 -40 <!-- 从当前点绘制一条线回到 (10,10) -->
           Z"      <!-- 闭合路径 -->
        stroke="black" fill="none" />
</svg>

这段代码创建了一个100x100像素的SVG画布，并在其中绘制了一个由水平线、垂直线和斜线组成的闭合图形。