svg开发总结

因工作需要使用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.动态更新仪表的属性值，实现渐变
这个没难度，就是在设计器里面定义一个矩形用渐变色填充，在代码里更新矩形的高度就行了。