在 SVG 中，path 元素的 d 属性中，有两个特殊的命令：H 和 V，用于指定水平和垂直线段。
** HORIZONTAL LINETO 命令 **
H：Horizontal lineto（水平直线到）命令，用于指定路径的下一个点，水平方向移动到指定的 x 坐标。- 例如：
H 30 移动到 x 坐标 30，保持当前 y 坐标不变 - 例如：
h 30 相对当前位置移动到 x 坐标 30，保持当前 y 坐标不变
** VERTICAL LINETO 命令 **
V：Vertical lineto（垂直直线到）命令，用于指定路径的下一个点，垂直方向移动到指定的 y 坐标。- 例如：
V 40 移动到 y 坐标 40，保持当前 x 坐标不变 - 例如：
v 40 相对当前位置移动到 y 坐标 40，保持当前 x 坐标不变
这些命令可以用来简化路径的定义，特别是在绘制水平或垂直线段时。
例如，以下代码将创建一个矩形：
<path d="M 10 10 H 30 V 40 H 10 V 10 Z" />
这将创建一个矩形，起点为 (10, 10)，然后水平移动到 x 坐标 30，接着垂直移动到 y 坐标 40，最后水平移动到 x 坐标 10，并闭合路径。
需要注意的是，H 和 V 命令只能用于水平和垂直线段，如果你需要绘制倾斜的线段，需要使用 L 命令。
在 SVG 中，path 元素的 d 属性（short for “data”）用于指定路径的形状和位置。d 属性的值是一个字符串，包含了一系列命令和参数，用于描述路径的每个部分。
以下是 d 属性中常见的命令和参数：
** MOVETO 命令 **
M 或 m：Move to（移动到）命令，用于指定路径的起点。- 例如：
M 10 20 移动到坐标 (10, 20) - 例如：
m 10 20 移动到相对当前位置的坐标 (10, 20)
** LINETO 命令 **
L 或 l：Line to（直线到）命令，用于指定路径的下一个点。- 例如：
L 30 40 绘制一条直线到坐标 (30, 40) - 例如：
l 30 40 绘制一条相对当前位置的直线到坐标 (30, 40)
** CURVETO 命令 **
C 或 c：Curve to（曲线到）命令，用于指定路径的下一个点，使用贝塞尔曲线。- 例如：
C 30 40 50 60 70 80 绘制一条贝塞尔曲线到坐标 (70, 80)，使用控制点 (30, 40) 和 (50, 60) - 例如：
c 30 40 50 60 70 80 绘制一条相对当前位置的贝塞尔曲线到坐标 (70, 80)，使用控制点 (30, 40) 和 (50, 60)
** QUADRATIC CURVETO 命令 **
Q 或 q：Quadratic curve to（二次曲线到）命令，用于指定路径的下一个点，使用二次贝塞尔曲线。- 例如：
Q 30 40 50 60 绘制一条二次贝塞尔曲线到坐标 (50, 60)，使用控制点 (30, 40) - 例如：
q 30 40 50 60 绘制一条相对当前位置的二次贝塞尔曲线到坐标 (50, 60)，使用控制点 (30, 40)
** ELLIPTICAL ARCTO 命令 **
A 或 a：Elliptical arc to（椭圆弧到）命令，用于指定路径的下一个点，使用椭圆弧。- 例如：
A 30 40 50 60 0 1 绘制一条椭圆弧到坐标 (50, 60)，使用椭圆中心点 (30, 40) 和半径 (50, 60)，clockwise=False - 例如：
a 30 40 50 60 0 1 绘制一条相对当前位置的椭圆弧到坐标 (50, 60)，使用椭圆中心点 (30, 40) 和半径 (50, 60)，clockwise=False
** CLOSEPATH 命令 **
Z 或 z：Close path（闭合路径）命令，用于闭合当前路径。
这些命令可以组合使用，以创建复杂的路径形状。例如：
<path d="M 10 20 L 30 40 C 50 60 70 80 90 100 Z" />
这将创建一个路径，起点为 (10, 20)，然后绘制一条直线到 (30, 40)，接着绘制一条贝塞尔曲线到 (90, 100)，最后闭合路径。
需要注意的是，d 属性的值可以是相对当前位置的，也可以是绝对坐标。
** path stroke=“black” 怎么理解 **
在 SVG 中，path 元素用于定义一个图形的路径，而 stroke 属性则用于指定该路径的描边（stroke）颜色。
当你设置 stroke="black" 时，意味着该路径的描边颜色将被设置为黑色。
换言之，stroke 属性控制的是路径的边框颜色，而不是路径内部的填充颜色。如果你想要设置路径内部的填充颜色，可以使用 fill 属性。
例如：
<path d="M10,10 L20,20 L30,10" stroke="black" fill="none" />
在上面的示例中，路径的描边颜色被设置为黑色，而填充颜色被设置为无（fill="none"），因此该路径将显示为一个黑色边框的三角形。
需要注意的是，stroke 属性还可以接受其他值，例如：
- 颜色名称（如
red、blue 等） - 颜色代码（如
#FF0000 等） *渐变颜色（如 url(#gradient) 等）
这些值都可以用来指定路径的描边颜色。