SVGで扇形を描く

俺アプリ SVG

円グラフを描くには楕円を描かないといけない。SVGで楕円を描くには、path要素を使うっぽい。path要素のd属性で描画に必要な座標とかを指定するんだけど、直感的に分かりにくい。
下図のような図を描くには

次のようなSVG文書を書く。

<?xml version="1.0" ?>
<svg width="300" height="300">
  <path d="M 150 150 L 150 0 A 150 150 0 0 1 232.42634671062092 24.67682828805954 Z"
        fill="#947fff" />
  <path d="M 150 150 L 232.42634671062092 24.67682828805954 A 150 150 0 0 1 299.7462237406902 158.72172433657136 Z"
        fill="#7fefff" />
  <path d="M 150 150 L 299.7462237406902 158.72172433657136 A 150 150 0 0 1 150 300 Z" 
        fill="#7fff8a" />
  <path d="M 150 150 L 150 300 A 150 150 0 0 1 12.26758396795887 90.58803509412652 Z" 
        fill="#f9ff7f" />
  <path d="M 150 150 L 12.26758396795887 90.58803509412652 A 150 150 0 0 1 149.99999999999997 0 Z"
        fill="#ff7f7f" />
</svg>

pathの解説は

が分かりやすかった。