svg绘图

矩形

<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
说明：
x– 矩形左上角x位置
y– 矩形左上角y位置
width–矩形宽
height–矩形高
rx–圆角x方向半径
ry–圆角y方向半径

圆

<circle cx="25" cy="75" r="20"/>
r–圆半径
cx–圆心x位置
cy–圆心y位置

椭圆

<ellipse cx="75" cy="75" rx="20" ry="5"/>
rx–椭圆x半径
ry–椭圆y半径
cx–椭圆中心x位置
cy–椭圆中心y位置

线条

<line x1="10" x2="50" y1="110" y2="150"/>
x1–起点x位置
y1–起点y位置
x2–终点x位置
y2–终点y位置

折线

<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
points–点集数列，每个数字用空白、逗号、终止命令符或者换行符分隔开，每个点必须包含2个数字(x坐标与y坐标)

多边形

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
路径绘制完后闭合图形

路径

<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
d–一个点集数列以及关于如何绘制路径
每一个命令用一个关键字母表示，字母M表示Move To命令，跟在命令字母后面的是所需移动点的x和y轴坐标
，例如：
移动到(10, 10)这个点命令，应该写成M 10 10
每一个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位; 另一种是用小写字母，表示采用相对定位

直线命令

5个画直线命令
M命令(实际上为移动画笔位置命令)
M x y或者m dx dy
经常出现在路径开始处，用于指明从何处开始画
L命令(Line To)
L x y或者l dx dy
两个参数，分别是一个点的xz轴和y轴坐标，L命令会在当前位置和之前位置(L前画笔所在点)之间画线段
H命令 绘制水平线
V命令 绘制垂直线
H x或者h dx
V y或者v dy

Z命令 闭合路径命令
Z或者z 不用区分大小写
会从当前点画一条直线到路径起点，虽然可能不总是需要闭合路径，常常放到路径的最后

曲线命令

两种贝塞尔曲线：三次贝塞尔曲线C和二次贝塞尔曲线Q
三次贝塞尔曲线需要定义一个点和两个控制点，使用C命令创建三次贝塞尔曲线，需要设置三组坐标参数:
C x1 y1, x2 y2, x y或者c dx1 dy1, dx2 dy2, dx dy
最后一个坐标(x,y)表示曲线终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点
控制点描述的是曲线起始点的斜率
S命令
通常情况下，一个点某一侧的控制点是其另一侧的控制点的对称(以保持斜率不变)
S x2 y2, x y或者s dx2 dy2, dx dy
Q命令
一个控制点，用来确定起点和终点的曲线斜率，两组参数(控制点和终点坐标)
Q x1 y1, x y或者q dx1 dy1, dx dy
T命令
T x y或者t dx dy

弧形

A rx ry x-axis-rotation large-arc-flag sweep-flag x y或者a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
large-arc-flag–角度大小，决定弧线大于还是小于180°，0表示小角度弧，1表示大角度弧
sweep-flag–弧线方向，0表示从起点到终点逆时针画弧，1表示从起点到终点顺时针画弧