使用步驟
1. 安裝svg
2. 具體操作
1. 打開svg，點擊file ，new，默認svg，點擊ok
顯示界面如下：
然后點擊image
把鼠標放到代碼下面的的桌面上，鼠標箭頭會變成一個十字，然后點擊桌布，彈出窗口，讓選擇一個圖片：
剛出來的時候，桌布上只能看到一個框框：
然后，右鍵桌布，在菜單中選擇image
顯示樣式如下：
此時，為了便於操作，切換回鼠標，點擊黑色鼠標就會變成鼠標樣式了：
由於我們的地圖需要放大，所以我們在開始的時候，就要把地圖放大，這樣在頁面上才能更好的顯示放大效果。需要調整桌布的寬高為4000，圖片的寬高要根據最大的像素來調整小的像素的大小，保持比例不變，例如：
我當前的畫布（就是svg標簽內的寬高），都要修改為4000，然后計算image的寬高：最大像素是height=655，改為height=4000；那么width=582就應該改為：4000*582/655=3554，修改x軸y軸都為零，便於后面添加文字
修改后的樣式如下：
我們在這個寬高的基礎上，再放大200%或者以上，以防地圖失真，放大在右下角，描點：
在描點之前，要設置一下背景，便於后面操作：
圈中部分，第一個顏色為背景色，第二個顏色為畫筆演示，我們這里要把背景色修改為無（就是畫筆的當前色），把畫筆修改為一個明亮的顏色，比如藍色：
畫筆的寬度也可以修改，右邊的1是默認值，大於1就是加粗，小於1就是變細，我們為了方便，修改為2
這樣就可以開始描點了，點擊pen：
隨便選擇一個地圖的邊線，然后就可以沿着邊線，一路點擊描點：
這里要注意一下：選中pen后，不能隨便點擊桌布，因為點擊一下就是一個點，如果這個點與其它點不連貫，代碼中就會多出一個path（path的數量會根據孤立的點或者線會有相應數量的增加），后面會出現一些不必要的麻煩。
中間如果畫錯的話，可以ctrl+z后撤，點到最后，要成閉環的時候，鼠標上面的+號會變成o，這樣就表示閉環了。
縮小后可以看到是這個樣子：
這個時候，把path中的id粘貼出來放到svg模板中，華中地圖整體是陰影部分：
那么就把id中的內容拷貝出來放在對應的id中：
在瀏覽器中打開，可以查看：
完整樣子：
然后就可以在這個的基礎上畫省份了，同樣，要修改一下背景色和畫筆顏色。
省份的邊線要挨着陰影線畫，如果覺得不好控制距離的話，可以放大倍率來畫，我這里調整為300%，這么點着就可以稍微快一點了，閉環后，如法炮制，把d中的值拷貝到模板中子模塊中，如河南：
地圖模板.svg 模板信息：
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd"> <!-- Created by SVGDeveloper 1.0 --> <svg width="4000" height="4000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!--安徽 #042b82 #063499 #083db2 #124ed1 #2464f0 #497dee--> <g id="map"> <!-- 陰影 --> <g id="yy" fill="none" fill-opacity="0.1" transform="translate(0,14)" > <path id="yy" stroke="#2e81df" stroke-width="32" d="" /> </g> <!-- 亳州 --> <path id="341600" fill="#042b82" stroke="black" stroke-width="2" d="" /> <!-- 阜陽 --> <path id="341200" fill="#021e5c" stroke="black" stroke-width="2" d="" /> <!-- 淮北 --> <path id="340600" fill="#063499" stroke="black" stroke-width="2" d="" /> <!-- 宿州 --> <path id="341300" fill="#083db2" stroke="black" stroke-width="2" d="" /> <!-- 六安 --> <path id="341500" fill="#124ed1" stroke="black" stroke-width="2" d="" /> <!-- 淮南 --> <path id="340400" fill="#071b49" stroke="black" stroke-width="2" d="" /> <!-- 安慶 --> <path id="340800" fill="#083db2" stroke="black" stroke-width="2" d="" /> <!-- 池州 --> <path id="341700" fill="#2464f0" stroke="black" stroke-width="2" d="" /> <!-- 黃山 --> <path id="341000" fill="#124ed1" stroke="black" stroke-width="2" d="" /> <!-- 蚌埠--> <path id="340300" fill="#124ed1" stroke="black" stroke-width="2" d="" /> <!-- 合肥 --> <path id="340100" fill="#497dee" stroke="black" stroke-width="2" d="" /> <!-- 滁州 --> <path id="341100" fill="#2464f0" stroke="black" stroke-width="2" d="" /> <!-- 蕪湖 --> <path id="340200" fill="#042b82" stroke="black" stroke-width="2" d="" /> <!-- 宣城 --> <path id="341800" fill="#497dee" stroke="black" stroke-width="2" d="" /> <!-- 銅陵 --> <path id="340700" fill="#021e5c" stroke="black" stroke-width="2" d="" /> <!-- 馬鞍山 --> <path id="340500" fill="#063499" stroke="black" stroke-width="2" d="" /> <g id="p_text"> <text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">亳州</text> <text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">阜陽</text> <text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">淮北</text> <text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">宿州</text> <text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">六安</text> <text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">淮南</text> <text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">黃山</text> <text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">蚌埠</text> <text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">合肥</text> <text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">滁州</text> <text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">蕪湖</text> <text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">宣城</text> <text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">銅陵</text> <text x="" y="" fill="#ffcc00" fill-opacity="0.8" class="font1">馬鞍山</text> </g> </g> </svg>
上面的關鍵字含義如下：
現在開始添加省份信息，比如給河南省添加名稱，並添加在地圖的中央位置（美觀）：
切換為鼠標，點擊桌面上顯示河南的這一塊連線，會顯示如下樣子：
可以看到中心有一個點，這個就是地圖中心位置，鼠標移動的這個上面，可以看到svg工具下方有一個坐標地址，把這個坐標地址填寫到
<text x="2033" y="1086" fill="#ffcc00" fill-opacity="0.8" class="font1">河南</text>
顯示如下：
