kskSVGで円グラフを描くシンプルな方法を思いついたのでシェアしておく。先人がいるかもしれないが、そんなに頑張ってチェックしてはいない。CodePen.ポイントは以下の通り。svgのcircleで扇形を描くcircleのfillはなく、太いstrokeで「塗り」に見せかける扇形の角度は破線の長さで調整するjsは不要。以上の説明だけではよくわからない人の為に、以下に順を追って解説する。1.SVGで円を書くインラインsvgの円はcircleタグで書けます。r="50"/></svg>円の中心をcx,cy属性で、半径をrで指定します。単位を省略するとpxになります。2.円の塗りを透明に、線に色をつけるfill属性で塗りを、stroke属性で線色を、stroke-width属性で線の太さを指定します。各属性をcssで指定することもできます。stroke-width="1"/></svg>3.円の線を破線にするstroke-dasharray属性で線を破線にします。奇数番目の数字が実線の長さ、偶数番目が隙間の長さです。stroke-dasharray="10,10"/></svg>4.線の太さを半径の倍にするsvgの線の太さは、線の両側に均等に太ります。その為、stroke-width属性を半径の2倍まで太くしていくと、見かけ上は2倍の半径の円になります。animationを指定して、変化が分かり易い様にしてあります。stroke-dasharray="10,10"/></svg>5.破線の長さと隙間を調整して、扇形を作るstroke-dasharray属性で破線をコントロールして、扇形を作ります。animationを指定して、変化が分かり易い様にしてあります。stroke-dasharray="30,70"/></svg>円弧をパーセンテージで指定し易くする為に、以下の工夫をしてます。63.6619772368′′にする扇型は時計で言うと3時の位置から描かれはじめる。円グラフにするなら、12時からの方が良いので、stroke-dashoffsetを25(1/4回転分)ずらす。svgの大きさをコントロールし易くする為に、svgをdiv等でラップして、ラッパーに幅を指定する。