svg動態繪制餅狀圖

1、<path>繪制圓弧曲線

語法：d="A rx ry x-axis-rotation large-arc-flag sweep-flag x y"

A  命令繪制橢圓弧。

參數含義：

rx,ry：橢圓的長半軸、短半軸；

x-axis-rotation：該段弧 所在橢圓的x軸與水平方向的夾角；

large-arc-flag：值可為0或1,0為小弧度角，1為大弧度角；

sweep-flag：繪制方向，0為逆時針，1為順時針；

x,y橢圓弧終點坐標。

 

2、js動態svg

var width=100,height=100;

var svgns="http://www.w3.org/2000/svg";

var chart=document.creatElementNS(svgns,"svg");

/*注：動態創建svg需要通過document.creatElementNS方式創建，其中ie8不支持

width、height與viewbox的關系

width、height確定svg沒有縮放的寬高；

viewbox的作用是確定一個框的大小，將原svg圖進行縮小或者放大至當前大小。

*/

chart.setAttrbute("width",width);

chart.setAttrbute("height",height);

chart.setAttrbute("viewbox","0 0"+width+" "+height);

 

3、動態創建扇形

具體代碼參考戳我戳我