1.了解SVG:
Scalable Vector Graphics (SVG) 可扩展矢量绘图，是一种用来描述二维矢量图形的XML标记语言。
2.特性:
- SVG 可被非常多的工具读取和修改（比如记事本）
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG 可以与 Java 技术一起运行 SVG 是开放的标准
- SVG 文件是纯粹的 XML
- SVG 的主要竞争者是 Flash。 与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和DOM）相兼容。而 Flash 则是未开源的私有技术。
3.SVG的基本形状有以下:
- 矩形 rect
- 圆形 circle
- 椭圆 ellipse
- 线 line
- 折线 polyline
- 多边形 polygon
- 路径 path
4.实战举例:
//绘制一个圆
<svg width="100%" height="100%" >
<circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" />
</svg>
//cx:X轴
//cy:Y轴
//r:半径
//stroke:线条颜色
//stroke-width:线条宽度
//fill:填充色
综合举例:
<svg width="200" height="250">
//矩形
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="1"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="1"/>
//圆形
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="1"/>
//椭圆
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="1"/>
//线条
<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>
以上代码在网页中的现实如下图:
各个参数的解释:
1.矩形 - rect元素
这个元素有6个控制位置和形状的属性，分别是：
x：矩形左上角的座标(用户座标系)的x值。
y：矩形左上角的座标(用户座标系)的y值。
width：矩形宽度。
height：矩形高度。
rx：实现圆角效果时，圆角沿x轴的半径。
ry：实现圆角效果时，圆角沿y轴的半径。
比如上面例子中，实现了圆角效果，你也可以通过设置rx,ry为不同的值实现椭圆角效果
2.椭圆 - ellipse元素
这个是更加通用的圆形元素，你可以分别控制半长轴和半短轴的长度，来实现不同的椭圆，很容易想到，当两个半轴相等时，就是正圆形了。
rx：半长轴(x半径)。
ry：半短轴(y半径)。
cx：圆心座标x值。
cy：圆心座标y值。
3.直线 - line元素
直线需要定义起点与终点即可：
x1：起点x座标。
y1：起点y座标。
x2：终点x座标。
y2：终点y座标。
4.折线 - polyline元素
折线主要是要定义每条线段的端点即可，所以只需要一个点的集合作为参数：
points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成：“0 0, 1 1, 2 2”。
5.多边形 - polygon元素
这个元素就是比polyline元素多做一步，把最后一个点和第一个点连起来，形成闭合图形。参数是一样的。
points：一系列的用空格，逗号，换行符等分隔开的点。每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成：“0 0, 1 1, 2 2”。
6.路径 - path元素
这个是最通用，最强力的元素了；使用这个元素你可以实现任何其他的图形，不仅包括上面这些基本形状，也可以实现像贝塞尔曲线那样的复杂形状；此外，使用path可以实现平滑的过渡线段，虽然也可以使用polyline来实现这种效果，但是需要提供的点很多，而且放大了效果也不好。这个元素控制位置和形状的只有一个参数：
d：一系列绘制指令和绘制参数(点)组合成。
绘制指令分为绝对座标指令和相对座标指令两种，这两种指令使用的字母是一样的，就是大小写不一样，绝对指令使用大写字母，座标也是绝对座标；相对指令使用对应的小写字母，点的座标表示的都是偏移量。
绝对座标绘制指令
这组指令的参数代表的是绝对座标。假设当前画笔所在的位置为(x0,y0)，则下面的绝对座标指令代表的含义如下所示：
| 指令 | 参数 | 说明 |
|---|---|---|
| M | x y | 将画笔移动到(x,y) |
| L | x y | 画笔从当前点移动到(x,y) |
| H | x | 画笔从当前的点绘制水平线段到点(x,y0) |
| V | y | 画笔从当前的点绘制竖直线段到点(x0,y) |
| A | rx ry x-axis-rotation large-arc-flag sweep-flag x y | 画笔从当前的点绘制一段圆弧到点(x,y)) |
| C | x1 y1, x2 y2, x y | 画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y) |
| S | x2 y2, x y | 特殊版本的三次贝塞尔曲线(省略第一个控制点) |
| Q | x1 y1, x y | 绘制二次贝塞尔曲线到点(x,y) |
| T | x y | 特殊版本的二次贝塞尔曲线(省略控制点) |
| Z | 无参数 | 绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。 |
7.绘制圆弧指令：A rx ry x-axis-rotation large-arc-flag sweep-flag x y
用圆弧连接2个点比较复杂，情况也很多，所以这个命令有7个参数，分别控制曲线的的各个属性。下面解释一下数值的含义：
rx,ry 是弧的半长轴、半短轴长度
x-axis-rotation 是此段弧所在的x轴与水平方向的夹角，即x轴的逆时针旋转角度，负数代表顺时针转动的角度。
large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线。
sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向，0 代表逆时针方向。
x,y 是弧终端座标。
下面就说说中间的3个参数：
x-axis-rotation代表旋转的角度，下面例子中圆弧的不同：
<svg width="320px" height="320px">
<path d="M10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>
效果如图:
注意:
因为旋转的角度不同所以看上去是不同的图,但是本质病没有改变
8.扩展
绘制三次贝塞尔尔曲线:
三次贝塞尔曲线有两个控制点，就是(x1,y1)和(x2,y2)，最后面(x,y)代表曲线的终点。eg：
<svg width="190px" height="160px">
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
<path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
<path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
<path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
<path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
<path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
<path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
<path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
<path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
</svg>
如下图:
