因工作需要使用svg实现组态画面里的管道流动和仪表效果,其中遇到了一些问题,记录在此。

1.开发工具

 AI_CS3_chs.exe,画组态图导出为svg格式。win764位下安装失败,window2003下安装成功。美工给做的图,出图很快。

Inkscape0.47pre4,编辑svg文件,实现动画,最大的用处就是选中一个元素在xml编辑器里修改属性。一开始使用了0.48的版本,安装时中文乱码,运行后xml编辑里不能修改属性的值,后来抛弃。

SVGDeveloper,用的破解版。好处就是可以实现语法提示,但提示的也不全。在网上找到的svg代码段可以直接黏贴到源码窗口,在视图窗口就看到了效果,按F12直接打开浏览器浏览,不用保存。学习svg这是个不错的工具

2.入门资料

有一本前几年出版的svg开发实践,网上已经没得卖了,有电子版可以下载。慢慢研究还是不错的书,只是时间太急没有细看。

国外关于svg的网站都是很多,都是英文的,详细链接见另一篇文章。http://www.cnblogs.com/zhaobl/archive/2013/02/26/2933704.html

3.实现时遇到的技术点

a.管道流动效果

实现方式有:js控制图元属性法、使用svg提供的SMIL动画

因为管道不是直的,有拐角使用js控制图元属性实现起来比较麻烦,放弃。

SMIL提供的animateMotion可以实现元素沿着一个路径运动,提供开始、停止、运行时间长度等属性设置。

实现过程:

美工出图后,在管道上面使用钢笔工具描出一个路径;使用js脚步动态创建元素,依次沿着路径运动。

实现效果:

代码:

      for(var i=0;i<count;i++)
          {
              var arrow = document.createElementNS("http://www.w3.org/2000/svg","path");

 arrow.setAttributeNS(null,"d", "M 0.0295257,3.2170172 4.7043281,1.6460377 -0.0022295,0.01628072 1.4026194,1.6249081 0.0295257,3.2170172 z");
           //   arrow.setAttributeNS(null,"d", "M -21.370884,24.236745 4.30747,-1.24684 -4.33673,-1.29349 1.29446,1.27672 -1.2652,1.26361 z");
              arrow.setAttributeNS(null,"sodipodi:nodetypes", "ccccc");
              arrow.setAttributeNS(null,"style", "fill:#00ff00;fill-opacity:1;stroke:none;display:inline;");

              var ani = document.createElementNS("http://www.w3.org/2000/svg","animateMotion");
              ani.setAttribute("begin", i+"s");
              ani.setAttribute("dur", count+"s");
              ani.setAttribute("repeatCount", "indefinite");
              ani.setAttribute("rotate", "auto");
              var mpath = document.createElementNS("http://www.w3.org/2000/svg","mpath");
              mpath.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#path6535");
              ani.appendChild(mpath);

              var set = document.createElementNS("http://www.w3.org/2000/svg","set");
              set.setAttributeNS(null,"attributeName", "visibility");
              set.setAttributeNS(null,"begin",i+"s");
              set.setAttributeNS(null,"to", "visible");
              arrow.appendChild(set);

              arrow.appendChild(ani);
              SVGRoot.appendChild(arrow);
          }

b.动态更新仪表的属性值,实现渐变
这个没难度,就是在设计器里面定义一个矩形用渐变色填充,在代码里更新矩形的高度就行了。

 

 

 

 

 

posted on 2013-03-07 16:07  赵保龙  阅读(5182)  评论(0编辑  收藏  举报