svg 开发篇（一）

从前面文章中，介绍了svg的用途，这篇文章将讲解svg开发方法。

因为项目是要求绘制重庆的路网信息图，并统计路网数据，进行动画展示，所以使用原生的svg会产生大量代码，过渡渲染，进而降低界面打开的速度，因而我们选择了raphael 拉斐尔javascript库作为我们的开发插件,所以下面我们学习的svg开发技术都是基于raphael脚本的，如果有兴趣了解svg原生开发的可以直接到菜鸟教程中查看。

raphael的开发资料：http://dishuostec.sinaapp.com/javascript/raphael/

1.raphael浏览器支持

      Raphaël 是跨浏览器的矢量图形库，目前支持的浏览器包括： Firefox 3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+ 以及 Internet Explorer 6.0+。

2.raphael 绘图效果展示

 

3.如何使用？

• 　　在页面中引入 raphael.js 文件，
•       在浏览器视口创建画布

var raphaelObj = Raphael(x,y,width,height); 

Raphael function中4个参数分别是x坐标、y坐标、宽度、高度。

 

也可以依赖于div等html节点绘制：

 

      

4.创建你第一个图形

•  圆形：

               

• 矩形：
• 

   

• 椭圆

             

• 复杂图形：

            

5.对象的属性attr

•            

                   

                   

 

         

•          需要注意：Element.data(key, [value])  添加或检索与给定的键关联的值。
  

                               Element.removeData([key])

          

• Element.transform 为元素增加变换，这是独立于其他属性的变换，即变换不改变矩形的x或y。变换字符串跟路径字符串的语法类似：   

           

 

 

        "t100,100r30,100,100s2,2,100,100r45s1.5"   其中r有两种，r30表示以对象中间为轴，旋转30度，r30,50,90 表示对象以坐标（50,90）为轴旋转30度，如上图实例。

6.对象的自定义属性

           

   例如项目里面使用的，表示小车随着时间变化，沿着路径移动的代码：

lenDown：表示路径的长度，如下；

var lenDown = pathDown.getTotalLength();

v：表示动画的进度

          

   使用方法：

         

7.对象的事件

          click：单击事件 Element.click(handler)

          dbclick：双击事件 Element.dblclick(handler)

          drag： 拖拽事件 Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])

          hover:鼠标悬停事件 Element.hover(f_in, f_out, [icontext], [ocontext])

          mousedown：鼠标按下事件  Element.mousedown(handler)

       

          mousemove：当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件 Element.mousemove(handler)。

         mouseup：鼠标松开事件 Element.mouseup(handler)

         mousemove：鼠标从一个元素移入另一个元素时触发 Element.mousemove(handler)

         mouseover：Element.mouseover(handler) 鼠标移出元素时触发

       

8.动画

           

系统中使用：

          

 

或者：