SVG 直线路径写法示例

直线指令

• M 移动
• L 画线
• H 画水平线 H 20 相对与 L 20 当前y座标
• V 画垂直线 V 20 相对与 V 当前x座标 20
• Z 闭合曲线

画直线

大写字母表示到后面值为绝对值，小写字母表示后面值为相对当前点的值 画一条起点是（10, 10）终点点是 (20, 30) 的线

<path d="M 10 10 L 20 30" stroke="#333"/>

在当前点的位置水平移动 10，垂直移动 10，再画一天到 (40, 50) 的线

<path d="m 10 10 L 40 50" stroke="#333"/>

画一个与下面代码等效的矩形

<rect x="10" y="20" width="30" height="15"/>

<path d="M 10 20 h 30 v 15 h -30 Z" stroke="#333"/>