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的图形与属性<rect> <circle> <line> <polyline> <polygon>
基本属性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渐变:

       <svg>
           <defs>

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

         </defs>
      </svg>

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

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

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>

two.js插件，待续

svg的一些简介

推荐阅读更多精彩内容