一、什么是SVG

SVG是一种使用XML技术描述二维图形的语言,svg是一种矢量图，它并不属于HTML5专有内容，在HTML5出现之前，就有SVG内容，但是HTML5提供了SVG原生的内容，svg文件的扩展名为.svg

二、svg的优势

1）可通过文本编辑器来创建和修改

2）可被搜索引擎搜索到

v3）SVG可在任何的分辨率下被高质量的打印

4）可在图片质量不下降的情况下被放大

5）支持事件绑定

svg不依赖像素，且支持事件处理，不适合做游戏，但适合做又大型渲染区域的程序（例如：百度地图）

canvas以来分辨率，不支持事件绑定，比较适合做网页游戏，可以用图片格式保存图像

但是不论是svg还是canvas，他们在一个页面中都可以定义多个

使用svg绘制图形，必须定义svg元素，<svg></svg>

1、矩形

<rect x="" y="" width="" height="" ></rect>

2、圆形

<circle cx="" cy="" r=""></circle>

3、椭圆形

<ellipse cx="" cy="" rx="" ry=""></ellipse>

4、直线

<line x1="" y1="" x2="" y2=""></line>

5、折线

<polyline points=""></polyline>

points - 设置起点折点及重点，x和y用逗号分隔，多个折点用空格隔开

6、多边形元素

<polygon points=""></polygon>

解决折线的这点显示问题

渐变代码

效果图

<svg>

<defs>

<linearGradient>

<stop>

</linearGradient>

</defs>

</svg>

efs里追加linearGradient元素，他才是真正实现渐变的元素,用stop标签来控制渐变颜色和范围

offset: 值为百分比

stop-color:设置渐变颜色

stop-opacity:设置渐变颜色的透明度

模糊实现代码

效果