在我們平時做的很多網站項目中都會需要繪製各種各樣的二維矢量圖形。比如做城市地下管網的斷面圖、管線管點的坐標位置矢量標識圖、鑽孔位置或地層剖面圖等等。我們有很多種方法來繪製這些矢量圖（vml、canvas、svg等等），下麵我要介紹的是SVG繪圖語言，也是我在做項目中用到比較多的，僅以我的個人實戰經驗分享給大家，供大家參考：

一、SVG理論知識

　　SVG是一種矢量標記語言，網上也有很多關於SVG的理論知識描述，大家可以自己去百度學習，比較通俗地說，SVG是一種語言，是一塊畫布，在這塊畫布上，用戶可以按照它的語言格式，調方法去繪製各種點、線、面、矩形、多邊形、圓形、貼圖等等，從而畫出自己想要的二維圖形效果。

　　註意：SVG最主要的一個應用就是繪製的二維圖可縮放，每個節點均可添加點擊或各種響應事件。

　　（1）線段

　　　　　SVG標記節點： 

　　　　　　<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

　　（2）折線

　　　　　SVG標記節點：

　　　　　　<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>

　　（3）圓

　　　　　SVG標記節點：

　　　　　　<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

　　（4）矩形

　　　　SVG標記節點：

　　　　　　<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>

　　　　腳本中動態創建（其它幾類節點類似，可百度查找到方法）：

　　　　　　var rect=document.createElementNS('http://www.w3.org/2000/svg','rect'); 
        　　　　rect.setAttribute("id","rect"); 
        　　　　rect.setAttribute("x",0); 
        　　　　rect.setAttribute("y",0); 
        　　　　rect.setAttribute("width",200); 
        　　　　rect.setAttribute("height",200); 
        　　　　rect.setAttribute("fill",'red'); 
        　　　　svg.appendChild(rect); //svg為頁面中添加的svg根節點

　　（5）多邊形

　　　　SVG標記節點：

　　　　　　<polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>

　　（6）路徑

　　　　SVG標記節點：

　　　　<path d="M250 150 L150 350 L350 350 Z" />

　　（7）貼圖

　　　　可以在多邊形中平鋪或填充圖片，從而達到顯示剖面紋理圖的效果。

二、實際應用

　　（1）基本的點線剖面圖

　　　　所有涉及到簡單的繪製點、線、多邊形等剖面圖的都可以自己在js腳本中動態創建節點來繪製。

　　（2）二維地圖繪製：

　　　　可在ArcMap中將矢量二維地圖數據導出成SVG文件，導出過程中可以設置文字標識、顏色等等信息，導出的SVG文件即可以嵌入到網頁中顯示了。

　　（3）管網拓撲圖：

 　　　　與上面的二維地圖繪製一樣，將管網shp數據在ArcMap中打開，導出成SVG文件，然後嵌入到網頁中顯示。

　　（4）地層剖面圖

　　　　該應用涉及到地質相關業務，總之，剖面得到的多邊形可以通過SVG動態創建多邊形節點，然後填充紋理圖片路徑，便可以顯示各個地層多邊形的紋理圖了

　　各應用效果圖在後面再補上，先對自己做的一些關於SVG的經驗做個總結。

作者：Ares_perfect 

出處：http://www.cnblogs.com/onlyperfect/

本文以學習、研究和分享為主，如需轉載，請聯繫本人，標明作者和出處，非商業用途！