基本内容
什么是SVG? 全称为Scalable Vector Graphics，是一种使用XML技术描述二维图形的语言，简单来说 - 矢量图(不失真)
SVG与HTML5的关系
早在HTML5之前,存在SVG技术
SVG文件扩展名为".svg"
在HTML5出现之前,要在HTML页面中引入SVG文件
在HTML5出现之后,将SVG内容直接定义在HTML页面中
SVG的优势
可以使用文本编辑器创建和修改，SVG可被搜索、索引等，SVG绘制的图像不失真的
SVG与Canvas的区别
SVG不依赖于分辨率，使用DOM或绑定事件，实现大型渲染区域的应用(地图类)
Canvas依赖于分辨率，不能使用DOM或绑定事件的，运行时以图片形式出现".jpg"
SVG的标准也是W3C定制的
设置样式
1.通过元素的属性方式
fill - 设置填充样式
fill-opacity - 设置填充透明度
stroke - 设置描边样式
stroke-width - 设置边框的宽度
2.通过style属性,使用类似于CSS属性设置方式
注意 - 不能使用CSS中的样式进行设置
transform属性，用于设置转换效果
方法有：rotate()、scale()、translate()
绘制图形
矩形元素- <rect>元素
<rect x="" y="" width="" height="" rx="" ry="" />
x和y - 绘制矩形的左上角坐标值
width和height - 设置绘制矩形的宽度和高度
rx和xy - 设置圆角矩形
圆形元素 - <circle>元素
<circle cx="" cy="" r="" />
cx和cy - 绘制圆形的圆心坐标值
cx和cy不设置值的话,默认为(0,0)
r - 绘制圆形的半径
椭圆元素- <ellipse>元素
<ellipse cx="" cy="" rx="" ry="" />
cx和cy - 绘制椭圆的圆心坐标值
rx - 绘制椭圆的水平方向的半径
ry - 绘制椭圆的垂直方向的半径
注意：当rx和ry的值相同时,绘制的是圆形
线条元素- <line>元素
<line x1="" y1="" x2="" y2="" />
x1和y1 - 绘制直线的起点坐标值
x2和y2 - 绘制直线的终点坐标值
注意：绘制直线时,默认描边颜色为白色
折线元素 - <ployline>元素
<polyline points="" />
points - 折线的所有点坐标值,都设置在该属性中
注意：描边颜色默认为白色,填充颜色默认为黑色
多边形元素- <polygon>元素
<polygon points="" />
points - 折线的所有点坐标值,都设置在该属性中
注意： SVG绘制图形使用元素
单标签 - 增加结束符"/"
起始标签
特效元素
线性渐变 - 基准线
<defs>
<linearGradient id="grad" x1="基准线的起点坐标值x" y1="基准线的起点坐标值y" x2="基准线的终点坐标值x" y2="基准线的终点坐标值y">
<stop offset="0%~100%" stop-color="颜色" />
</linearGradient>
</defs>
<rect fill="url(#渐变元素的id)">
射线渐变 - 基准圆
<defs>
<radialGradient id="grad" fx="设置起点基准圆的圆心x" fy="设置起点基准圆的圆心y" cx="设置终点基准圆的圆心x" cy="设置终点基准圆的圆心y" r="设置终点基准圆的半径">
<stop offset="0%~100%" stop-color="颜色" />
</radialGradient>
</defs>
<rect fill="url(#渐变元素的id)">
注意：线性渐变或射线渐变,设置基准线(圆)的坐标值必须是百分值，允许为负值，允许为大于 100% 的值
设置渐变颜色位置必须是百分值
只能是从 0% ~ 100%
滤镜元素 - 高斯模糊
滤镜元素 - <filter>元素
高斯模糊 - <feGaussianBlur>元素