SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
目录html
SVG 学习<二>进阶 SVG世界，视野，视窗 stroke属性 svg分组post
SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令code
SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令orm
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
SVG的path能够理解外一支画笔，由一连串的命令控制画笔在SVG中绘制须要的形状。
path经过属性 d 来编写画笔命令。
命令说明：
其中 大写命令坐标是绝对位置，小写命令坐标是相对位置。
直线命令：
例（大写命令）：
<path d="M10 10,L200 200,V50,H10,L10 10"/>
例（小写命令）：
<path d="m10 10,l200 200,v50,h10,l10 10"/>
直线命令解析：
M/m：移动命令，也是基础命令，几乎path绘制开始都以M/m做为第一个命令。
L/l：直线命令，链接上一个命令结束坐标和该命令制定的新坐标。
V/v：垂直直线命令，绘制垂直方向直线。
H/h：水平直线命令，绘制水平方向直线。
圆弧命令：
例：
<path d="M10 10,A100 100 0 0 0 100 100"/>
圆弧命令解析：
A/a: rx ry xr laf sf x y.
rx ry 定义圆弧椭圆的两个半轴；
xr 定义圆弧椭圆旋转角度；
laf sf 因为符合两点间的圆弧有4条，laf 决定取大角弧（1）仍是小角弧（0） ， sf决定取顺时针弧（1）仍是逆时针弧线（0）；
x y 定义弧的终点；
下面四个效果就是改变 laf 和 sf 后的效果，其余参数彻底同样。