命令 名称 参数
M moveto 移动到 (x y)
Z closepath 关闭路径 (none)
L lineto 画线到 (x y)
H horizontal lineto 水平线到 x
V vertical lineto 垂直线到 y
A elliptical arc椭圆弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)
C curveto 三次贝塞尔曲线到 (x1 y1 x2 y2 x y)
S smooth curveto 光滑三次贝塞尔曲线到 (x2 y2 x y)
Q Bézier curveto 二次贝塞尔曲线到 (x1 y1 x y)
T smooth Bézier curveto光滑二次贝塞尔曲线到 (x y)
A(elliptical Arc)弧形
rx ry 分别是是椭圆的x轴半径和y轴半径。
x-axis-rotation 是椭圆相对于坐标系的旋转角度。
large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。
sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。
x y 是圆弧终点的坐标。
例: M 120 45 A 60 45 0 0 0 80 125, 效果如下图
PS:如果指令字母是大写的,例如M, 则表示坐标位置是绝对位置;如果指令字母小写的,例如m, 则表示坐标位置是相对位置。
<path d="M150 0 L75 200 L225 200 Z" fill="red" stroke="blue" stroke-width="10"/>