HTML SVG 路径

首先

之前是查过相关资料的，但是后来修改需求时又涉及到路径，又得回头重查，可怕的是这个知识点的名字都记不起来了。所以还是静下来记录一下

//路径格式
ret.push("M", sx, sy, "A", ir * rx, ir * ry, "0 0 1", ex, ey, "L", ex, h + ey, "A", ir * rx, ir * ry, "0 0 0", sx, h + sy, "z");
ret.join(" ");//替换“，”为“ ”；

相关命令的含义

M:移动

M 0 0 //设置起点

L:线到

L 100 100 //从当前点连线到100，100

H:水平线
>

V:垂直线
>

C:曲线
>

S:平滑曲线
>
Q:二次贝塞尔曲线
>

T:平滑二次贝塞尔曲线
>

A:椭圆弧

A中含有7个参数，格式如下
A rx ry x-axis-rotation larrge-are-flag sweepflag x y
rx : x轴半径
ry : y轴半径
x-axis-rotation ：绕x轴旋转，默认方向为顺时针，参数为角度，如 “ -45”，“45”
larrge-are-flag ：选择大弧度（1）还是小弧度（0）
sweepflag ： 顺时针（1）逆时针（0）
x y : 设置弧度结束点的坐标。但是需要注意： 弧度闭合时，不能和初始点一致，否则图形大小为0，可以通过偏移一点的坐标绘制闭合弧度。另外弧度精度最小为0.0001. 如： M 100 100 A 50 50 0 1 1 100 99.9999 （此处偏移了0.0001）

Z:关闭路径
>

:“0 0 0” ：*

其他

path并不是只能保存一段路径，

ret.push("M", sx, sy, "A", ir * rx, ir * ry, "0 0 1", ex, ey, "L", ex, h + ey, "A", ir * rx, ir * ry, "0 0 0", sx, h + sy, "z","M", sx, sy, "A", ir * rx, ir * ry, "0 0 1", ex, ey, "L", ex, h + ey, "A", ir * rx, ir * ry, "0 0 0", sx, h + sy, "z");//"z"是关闭路径，但是可以在面新接一段path。在一个path标签中变有了多个路径。