SVGのpathで円を描画する

SVGで円を描画したい場合は基本的にcircleを使用することが多いですが、少し特殊な処理をしたいことがあったのでpathを使って描画する方法を試してみました。

サンプルコード

400px × 400px のSVGの中央位置に、半径100pxの円を描画する例で試してみます。
pathでは円弧の描画ができるので、まずは半円を描画してみます。

<svg width="400" height="400" viewBox="0 0 400 400">
  <rect width="400" height="400" fill="#999999" />
  <path d="
    M300,200
    A100,100 0 1 1 100,200 Z"
    fill="red" />
</svg>

4行目のMから始まるコードが描画開始位置で、今回の中央座標になる200 × 200 の地点から、X軸方向に半径分の100pxだけ移動して、300,200 にしています。
5行目のAから始まるコードが円弧の描画で、ポイントは先頭の 100,100 がX軸方向の半径とY軸方向の半径、末尾の 100,200 が円弧の描画の終了位置の指定になる点です。
これで 300,200 の地点から 100,200 の地点に向かって、半径100pxの円弧が描画されます。
半円を描画するデモページ

後は続きに残り上半分の半円を描画することで、円の描画ができます。

<svg width="400" height="400" viewBox="0 0 400 400">
  <rect width="400" height="400" fill="#999999" />
  <path d="
    M300,200
    A100,100 0 1 1 100,200
    A100,100 0 1 1 300,200 Z"
    fill="red" />
</svg>

これでpathで円を描画することができました。
円を描画するデモページ