学习SVG系列（2）：SVG图形系列
SVG形状：
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
矩形
<?xml version="1.0"?>
<svg viewBox="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="50"/>
</svg>
circle标签用于创建一个圆，cx表示圆心横坐标，cy表示圆心纵坐标，r表示圆心半径，默认填充为黑色 ，用fill来设置填充颜色
椭圆
<?xml version="1.0"?>
<svg width="120" height="120"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse cx="60" cy="60" rx="50" ry="25"/></svg>
ellipse用于创建一个椭圆，cx、cy用于设置圆心的横坐标、纵坐标，rx用于设置横轴，ry用于设置纵轴，默认为填充颜色为黑色
图片
<svg width="100%" height="100%" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image xlink:href="https://files.cnblogs.com/2917/fxlogo.png" x="0" y="0" height="100" width="100" />
</svg>
image用于加载一张图片，xlink:href属性用于连接图片资源路径，x、y开始坐标点位置，height、width照片宽高
画线
<svg width="120" height="120"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="20" y1="100"
x2="100" y2="20"
stroke="black"
stroke-width="2" />
</svg>
line标签用于创建一条线，x1,y1初始坐标轴点，x2,y2终止坐标点
画路线图
<svg width="100%" height="100%" viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg">
<path d="M 100 100 L 300 100 L 200 300 z"
fill="orange" stroke="black" stroke-width="3" />
</svg>
path标签用于创建一个路径，d表示一系列的坐标值
d值解析：
M x,y = moveto,将画笔移到指定的坐标位置
L x,y = lineto,划线到指定的坐标位置
H x = horiziontal lineto,画水平线到指定的X坐标位置
V y = vertical lineto,画垂直线到指定的Y坐标位置
C x1,y1 x2,y2 endx,endy 三次贝赛曲线
T x,y = smooth quadratic Belzier curveto,映射
A Rx,Ry,XROTATION,FLAG1,FLAG2,x,y = elliptical Arc,弧线
Z = closepath() , 关闭路径
A指令：
Rx,Ry 指所在椭圆的半轴大小
XROTATION指椭圆的x轴与水平方向顺时针方向夹角，可以想象成一个水平的椭圆绕中心顺时针旋转的角度
FLAG1有两个值，1表示大角弧线，0表示小角度弧线
FLAG2 有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针
x,y 为终点坐标
多边形
<svg width="120" height="120"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/>
</svg>
polygon标签用于创建多边形
points值，多对坐标值表示
折线
<svg width="120" height="120"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polygon points="60,20 100,40 100,80 60,100 20,80 20,40"/></svg>
polygon用于创建折线
points值，多对坐标值表示
矩形
<svg width="120" height="120"
viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10"
width="100" height="100"
rx="15" ry="15"/></svg>
rect标签用于创建一个矩形
x,y表示起始坐标
rx,ry 表示四个角的弧度
