一、SVG - 基础
1、 什么是SVG
1) SVG是一种使用XML技术描述二维图形的语言,svg是一种矢量图
2) 并不属于HTML5专有内容，在HTML5出现之前，就有SVG内容，HTML5只不过提供了SVG原生的内容
4) svg文件的扩展名为.svg
-
SVG的优势
1）可通过文本编辑器来创建和修改 2）可被搜索引擎搜索到 3）SVG可在任何的分辨率下被高质量的打印 4）可在图片质量不下降的情况下被放大 5）支持事件绑定 -
SVG与canvas的区别
SVG - 实际开发中，多用SVG
不依赖分辨率
支持事件处理器
不适合游戏
大型渲染区域的程序(例如，百度地图)Canvas
依赖分辨率 不支持事件绑定 最适合网页游戏 可以用图片格式保存图像
不管是SVG还是Canvas，在一个页面中都可以同时定义多个
4）用途
静态绘制图形
动态动画效果
专门提供事件
二、SVG-绘制图形
1. <svg></svg>
类似于canvas元素，但可以使用css样式
使用svg绘制图形，必须定义svg元素中
2、矩形元素
<rect x="100" y="100" width="200" height="150" fill="blue"
stroke="red" stroke-width="5"> </rect>
如果使用style属性来设置他的样式，例如设置背景颜色
style="background:red"是不行的，要使用style="fill:red"
3、 圆形元素
<circle cx="50" cy="50" r="50"></circle>
4、椭圆元素
<ellipse cx="" cy="" rx="" ry="">
cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径
5、直线元素
颜色必须得加
<line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black">
6、 折线元素
points - 设置起点 折点及重点，x和y用逗号分隔，多个折点用空格隔开
会默认将折线中的区域(起点到终点)，默认提供黑色,将fill设置为
canvas的颜色，将stroke设置为另一种颜色
<polyline points="">
5、 多边形元素
不用考虑折点的显示问题
<polygon points="">
代码
效果
三、SVG-渐变
1、 设置线性渐变步骤
1）创建SVG元素
<svg></svg>
2）在svg里追加defs元素
<svg>
<defs></defs>
</svg>
3）在defs里追加linearGradient元素，他才是真正实现渐变的元素
<svg>
<defs>
<linearGradient x1="" y1="" x2="" y2=""></linearGradient>
</defs>
</svg>
x1、y1:起点坐标值
x2、y2:终点坐标值
注意： 这四个值都是百分比
4）在linearGradient里面追加stop元素，stop元素真正设置渐变颜色
<svg>
<defs>
<linearGradient>
<stop offset="" stop-color="" stop-opacity="">
<stop offset="" stop-color="">
</linearGradient>
</defs>
</svg>
offset: 值为百分比
stop-color:设置渐变颜色
stop-opacity:设置渐变颜色的透明度
5）在defs下面追加<rect>,画出图形,并将上面设置的线性渐变，添加到矩形中
使用fill属性，值为url(#渐变元素的id值)
<rect x="0" y="0" width="400" height="400" fill="url(#linear)">
2、 扇形渐变radialGradient，参考线性渐变
代码
效果
四、SVG-高斯模糊效果
<svg width="500" height="500">
<defs>
<filter id="Gaussian_Blur">
//fegaussianblur- 高斯模糊,stdDeviation - 设置模糊程度
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<rect x="0" y="0" width="400" height="400" filter="url(#def)">
</svg>
滤镜使用filter元素
in="SourceGraphic" - 固定写法
效果图
每日分享一首音乐，今天是一首很喜欢的纯音乐。供大家敲代码之余放松下自己。
http://music.163.com/#/song?id=433103084
