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.動態更新儀表的屬性值，實現漸變
這個沒難度，就是在設計器里面定義一個矩形用漸變色填充，在代碼里更新矩形的高度就行了。