详细介绍SVG路径的H水平线和V垂直线命令，包括绝对坐标和相对坐标的用法。通过实例掌握如何绑制水平和垂直线段。 H 和 V 命令是 L 命令的简化形式，专门用于绑制水平和垂直线。
<path d="M 20,50 H 280" stroke="#3498db" stroke-width="2"/>
<path d="M 50,20 V 130" stroke="#e74c3c" stroke-width="2"/>
<path d="M 50,30 H 250 V 120 H 50 Z" fill="#3498db" fill-opacity="0.3" stroke="#3498db"/>
<path d="M 20,130 H 60 V 100 H 100 V 70 H 140 V 40 H 180 V 70 H 220 V 100 H 260 V 130"
fill="none" stroke="#e74c3c" stroke-width="2"/>
| 命令 | 等价形式 | 说明 |
|---|---|---|
| H 100 | L 100,当前y | 画水平线 |
| V 100 | L 当前x,100 | 画垂直线 |
| h 50 | l 50,0 | 相对水平线 |
| v 50 | l 0,50 | 相对垂直线 |
<path d="M 20,30 L 280,30" stroke="#3498db" stroke-width="2"/>
<path d="M 20,70 H 280" stroke="#e74c3c" stroke-width="2"/>
<path d="M 30,130 V 50 H 60 V 130 M 90,130 V 30 H 120 V 130 M 150,130 V 70 H 180 V 130 M 210,130 V 40 H 240 V 130 M 270,130 V 60 H 300 V 130"
fill="#3498db" fill-opacity="0.5" stroke="#3498db"/>
<path d="M 30,120 H 270 M 30,20 V 120" stroke="#333" stroke-width="2"/>
<path d="M 80,115 V 120 M 130,115 V 120 M 180,115 V 120 M 230,115 V 120" stroke="#333" stroke-width="1"/>
H 和 V 命令是 L 命令的简化形式，专门用于绑制水平和垂直线。使用 H 和 V 可以让代码更简洁，也更易读。在绑制矩形、台阶、柱状图等图形时特别有用。