svg的一些简介

svg
使用xml描述的矢量文件
W3C标准（1.1）
浏览器支持情况IE9+，chrome33.0+，firefox 28.0+ ，safari 7.0+
位图：是基于颜色的描述，马赛克！！！
矢量图：是基础数学的描述

QQ图片20161218125222.png

svg的使用方式
浏览器直接打开
在html中使用img标签引用
直接在html中使用svg标签
作为css背景

svg的图形与属性
基本属性fill stroke stroke-width transform

rect: x y width height rx ry 可以定义矩形的圆角 倘若没有给RX 它会使用另外一个充当属性
circle: cx cy r
ellipse:cx cy rx ry
line:x1 y1 x2 y2
polyline:points 格式xi,yi空格分开 会将第一个和最后一个点连接起来

基本操作api
创建图形：document.createElementNS(ns,tagName)
添加图形：element.appendChild(childElement)
设置/获取属性：
element.setAttribute(name,value)
element.getAttribute(name)

svg渐变:

offset:值为百分比
stop-color:设置渐变颜色
stop-opacity:设置渐变颜色的透明度

使用fill属性，值为url(#XXX)
扇形渐变雷同

svg高斯模糊效果

two.js插件，待续