create water .data flag proc 標記 tee 萬維網 ike

可縮放矢量圖形是基於可擴展標記語言（標準通用標記語言的子集），用於描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標準。
有關於svg的概念不需要講解太多，需要查看更多，請點擊svg百度，先來看看如何使用path來繪畫扇形。
1、第一步需要添加<svg>標簽
<svg xmlns="http://www.w3.org/2000/svg" id="svg_draw" width="300" height="300" baseProfile="full" xmlns:NS1="" NS1:xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1">
</svg>
2、第二步添加<path>標簽
<path xmlns="http://www.w3.org/2000/svg" fill="#110099" d="M 150 150 L 103.647 245.106 A 150 100 0 0 0 271.353 208.779 Z" />
參數：
fill是填充的顏色
d:是描述要繪畫的事務
在d中，如何是繪畫半圓的畫，
M x,y其中的x,y表述圓心的坐標
L x1,y1標識從x,y到x1,y1的直線。
A表示繪畫扇形
A rx,ry ratation_deg,flag1,flag2,x2,y2
其中rx表示x軸的半徑
ry表示y軸的半徑
ratation_deg 表示繪畫的旋轉角度，一般為0，不用，
flag1,flag2表示繪畫是按照大，還是按照小，也就是按照順時針還是逆時針來進行繪畫。x2,y2和x,y聯成的直線為開始線，按照順時針或者逆時針進行繪畫，當和x,y和x1,y1連成的直線為終結線，繪畫結束。z表示繪畫的路徑要閉合，同時file="none"。
顯示圖：

使用js jquery來進行繪畫的話：則
var path = $(document.createElementNS("http://www.w3.org/2000/svg", "path"));
var d = "M" + cx + " " + cy + " " + endSeat.x + " " + endSeat.y + " A" + rx + " " + ry + " 0 0 0 " + startSeat.x + " " + startSeat.y + " z";

var fill = this.data[i].color;
path.attr("d",d);
path.attr("fill",fill);

使用svg的path來繪畫扇形