一、SVG形状
SVG有一些预定义的形状元素，可被开发者使用和操作：
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
二、基本形状
要想插入一个形状，你可以在文档中创建一个元素。不同的元素对应着不同的形状，并且使用不同的属性来定义图形的大小和位置。
示例代码：
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/>
<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/>
<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
三、坐标系统
SVG使用的坐标系统或者说网格系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。注意，这和你小时候所教的绘图方式是相反的。但是在HTML文档中，元素都是用这种方式定位的。
四、SVG实例
（一）矩形 <rect>
示例代码及效果：
<svg width="500px" height="500px" style="margin:50px;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="95" y="95" rx="20" ry="20" width="200" height="200" style="fill:rgb(99,99,99);stroke-width:2;stroke:rgb(33,33,33);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9;"></rect>
</svg>
解析：
x
矩形左上角的x位置
y
矩形左上角的y位置
rx
圆角的x方位的半径
ry
圆角的y方位的半径
width
矩形的宽度
height
矩形的高度
fill
设置对象内部的填充颜色
fill-opacity
控制填充色的不透明度（范围：0 - 1）
stroke
定义矩形边框的颜色
stroke-opacity
控制描边的不透明度（范围：0 - 1）
stroke-width
定义矩形边框的宽度
（二）圆形 <circle>
示例代码及效果：
<!--圆形-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="#FF8C00" />
</svg>
解析：
r
圆的半径
cx
圆点的x坐标
cy
圆点的y坐标
（三）椭圆 <ellipse>
示例代码及效果：
<!--椭圆-->
<svg width="500px" height="500px" style="margin:50px;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="275" cy="125" rx="100" ry="50" style="fill:#7D9EC0;stroke:#6B6B6B;stroke-width:2;"></ellipse>
</svg>
解析：
cx
椭圆中心的x坐标
cy
椭圆中心的y坐标
rx
定义的水平半径
ry
定义的垂直半径
（四）线条 <line>
<line>绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。利用两点确定一条直线的原理。
示例代码及效果：
<!--直线-->
<svg width="600px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="100" y2="100" style="stroke:rgb(99,99,99);stroke-width:2;"></line>
<line x1="100" y1="100" x2="0" y2="200" style="stroke:rgb(99,99,99);stroke-width:2;"></line>
</svg>
解析：
x1
起点的x位置
y1
起点的y位置
x2
终点的x位置
y2
终点的y位置
（五）折线 <polyline>
<polyline>是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个points属性中。
示例代码及效果：
<!--五星 未填充颜色-->
<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="100 10,40 180,190 60,10 60,160 180" style="fill:none;stroke:black;stroke-width:3"/>
</svg>
<!--五星 填充颜色-->
<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="100 10,40 180,190 60,10 60,160 180" style="fill:#EE2C2C;stroke:#EE2C2C;stroke-width:3" />
</svg>
</svg>
解析：
points
每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。
（六）多边形 <polygon>
<polygon>和折线很像，它们都是由连接一组点集的直线构成。不同的是，<polygon> 的路径在最后一个点处自动回到第一个点。
<polygon> 标签用来创建含有不少于三个边的图形。 多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）。
示例代码及效果：
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="220,100 300,210 170,250 123,234" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
</svg>
解析：
points
每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。
（七）路径 <path>
path元素是SVG基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。
path元素的形状是通过属性d来定义的，属性d的值是一个“命令+参数”的序列。
每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你需要移动到的那个点的x和y轴坐标。比如移动到(10,10)这个点的命令，应该写成“M 10 10”。这一段字符结束后，解析器就会去读下一段命令。每一个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位。另一种是用小写字母，表示采用相对定位
因为属性d采用的是用户坐标系统，所以不需标明单位
path的实例放到下篇...
其它文章：
- 实例篇请访问：svg入门详解（实例篇）
- 理论篇请访问：svg入门详解（理论篇）
- path详解篇请访问：svg之path详解
参考：路径-SVG|MDN
参考：svg教程
