1.SVGで円を書く

インラインsvgの円はcircleタグで書けます。

<svg viewBox="0 0 200 200">
 <circle cx="100" cy="100" r="50"/>
</svg>

円の中心をcx,cy属性で、半径をrで指定します。単位を省略するとpxになります。

2.円の塗りを透明に、線に色をつける

fill属性で塗りを、stroke属性で線色を、stroke-width属性で線の太さを指定します。各属性をcssで指定することもできます。

<svg viewBox="0 0 200 200">
 <circle cx="100" cy="100" r="50"
  fill="rgba(0,0,0,0)"
  stroke="#c09"
  stroke-width="1"/>
</svg>

3.円の線を破線にする

stroke-dasharray属性で線を破線にします。奇数番目の数字が実線の長さ、偶数番目が隙間の長さです。

<svg viewBox="0 0 200 200">
 <circle cx="100" cy="100" r="50" fill="rgba(0,0,0,0)"
 stroke="#c09"
 stroke-width="1"
 stroke-dasharray="10,10"/>
</svg>

4.線の太さを半径の倍にする

svgの線の太さは、線の両側に均等に太ります。その為、stroke-width属性を半径の2倍まで太くしていくと、見かけ上は2倍の半径の円になります。このサンプルには、stroke-widthが0から半径の2倍になるまでのcss animationを指定して、変化が分かり易い様にしてあります。

<svg viewBox="0 0 200 200">
 <circle cx="100" cy="100" r="50" fill="rgba(0,0,0,0)"
 stroke="#c09"
 stroke-width="100"
 stroke-dasharray="10,10"/>
</svg>

5.破線の長さと隙間を調整して、扇形を作る

stroke-dasharray属性で破線をコントロールして、扇形を作ります。このサンプルには、stroke-dasharrayが 0,100 から 30,70 になるcss animationを指定して、変化が分かり易い様にしてあります。

<svg viewBox="0 0 63.6619772368 63.6619772368" class="sda-anime">
 <circle　cx="31.8309886184" cy="31.8309886184"
 r="15.9154943092" fill="rgba(0,0,0,0)"
 stroke="#c09"
 stroke-width="31.8309886184"
 stroke-dashoffset="25"
 stroke-dasharray="30,70"/>
</svg>

円弧をパーセンテージで指定し易くする為に、以下の工夫をしてます。

1. 円周が100pxになるように逆算し、半径（r）を15.9154943092にする
2. 円の中心（cx,cy）は、半径の倍の31.8309886184にしておく
3. svgのviewBoxは、見かけ上2倍になった円が収まる様に、半径（r）の4倍の大きさ”0 0 63.6619772368 63.6619772368″にする
4. 扇型は時計で言うと3時の位置から描かれはじめる。円グラフにするなら、12時からの方が良いので、stroke-dashoffsetを25（1/4回転分）ずらす。
5. svgの大きさをコントロールし易くする為に、svgをdiv等でラップして、ラッパーに幅を指定する。svg自体は、ラッパーの幅に応じて変わるようにpadding-bottom trickを使う。
6. このように準備した上で、例えば30%の扇形を描きたいなら、 stroke-dasharray=”30,70″ とする。