svg 基础
1.svg是一种使用xml技术描述二维图形的语言，是一种适量图
2.与canvas相比的优势
- 能被搜索引擎搜索到
- 不依赖分辨率
- 能绑定事件
- 大型渲染区域（如：百度地图），不适合游戏
3.用途 - 静态图形绘制
- 动态动画效果
- 专门事件绑定
绘制图形
1.绘制矩形
<svg>
<rect id="rect" width="50" height="50" fill="red" stroke="black" stroke-width="5"></rect>
</svg>
注意：
- 如果要使用style设置背景颜色，不能使用style=“background：red”,要使用style=“fill：red”
- 不能通过js设置图形的属性，这些属性都为只读，如（width，height）
2.绘制圆形
<svg>
<circle cx="100" cy="100" r="50"></circle>
</svg>
3.绘制椭圆
<svg>
<ellipse cx="100" cy="100" rx="50" ry="80"></ellipse>
</svg>
4.绘制直线
<svg>
<line x1="10" y1="10" x2="200" y2="200" stroke="black></line>
</svg>
注意：颜色必须得加
5.绘制折线
<svg>
<polyline points="100,20 20,100 200,200"></polyline>
</svg>
6.绘制多边形
<svg>
<polygon points="100,20 20,100 200,200 100,20"></polygon>
</svg>
渐变效果
1.线性渐变
<svg>
<defs>
<linearGradient id="rect" x1="0" y1="0" x2="100%" y2="100%">
//渐变元素，坐标值必须是百分数
<stop offset="0" stop-color="red"></stop>
<stop offset="100%" stop-color="green"></stop>
//通过stop设置渐变颜色，offset值必须是百分数
</linearGradient>
<defs>
<rect width="400" height="400" fill="url(#rect)"></rect>
//使用fill属性，值为url(#渐变元素的id值)
</svg>
2.扇形渐变
radialGradient 参考线性渐变
模糊效果
<svg>
<defs>
<filter id="rect"><feGaussianBlur in=“SourceGraphic stdDeviation="3”></filter>
<defs>
<rect width="400" height="400" filter="url(#rect)" fill="red"></rect>
//使用fill属性，值为url(#渐变元素的id值)
</svg>
two.js
1、 专门用于绘制二维图形，支持SVG Canvas WebGL
2、 特点
- 深度实现具有动画效果的矢量图
- 致力于更简洁地创建矢量图及动画效果
- 不支持文本或图片
3、 svg再将来的工作开发，使用率并不高 - svg图片一般都是由UI设计师来完成
- SVG即使是我们自己来设计，目前网络上有很多提供svg图片的网站
- 使用JS库来
