SVGパスのArcコマンドで円グラフのスライスを描く

Arcコマンドによる円グラフのスライス

円グラフのスライスは円のセクター（扇形）で、M（移動）、L（直線）、A（円弧）コマンドの組み合わせで描画します。

計算式

角度startAngleからendAngle（ラジアン）、半径r、中心(cx, cy)のスライスの場合：

startX = cx + r * cos(startAngle)
startY = cy + r * sin(startAngle)
endX   = cx + r * cos(endAngle)
endY   = cy + r * sin(endAngle)
largeArcFlag = (endAngle - startAngle > PI) ? 1 : 0

パスのテンプレート

M cx,cy L startX,startY A r,r 0 largeArcFlag,1 endX,endY Z

例：25%スライス（90度）

中心(50, 50)、半径40の円で、0度から90度のスライス：

M 50,50 L 90,50 A 40,40 0 0,1 50,90 Z

コマンド	説明
M 50,50	中心に移動
L 90,50	弧の開始点（右、0度）まで直線
A 40,40 0 0,1 50,90	弧の終了点（下、90度）まで円弧
Z	中心に閉じる

50%以上のスライスの処理

スライスが180度を超える場合、large-arc-flagを1に設定します：

# 75%スライス（270度）：
M 50,50 L 90,50 A 40,40 0 1,1 50,10 Z

ドーナツチャートのバリエーション

ドーナツスライスには内側の弧を追加します：

M outerStartX,outerStartY
A outerR,outerR 0 largeArc,1 outerEndX,outerEndY
L innerEndX,innerEndY
A innerR,innerR 0 largeArc,0 innerStartX,innerStartY Z

内側の弧ではsweepフラグが反転していることに注意してください。