SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

目录

SVG 学习<一>基础图形及线段

SVG 学习<二>进阶 SVG世界，视野，视窗 stroke属性 svg分组

SVG 学习<三>渐变

SVG 学习<四> 基础API

SVG 学习<五> SVG动画

SVG 学习<六> SVG的transform

SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

（转）利用 SVG 和 CSS3 实现有趣的边框动画

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

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 后的效果，其他参数完全一样。