SVG Pie Chartの描画

今回のプロジェクトでは、円グラフをそのままsvgにしてみました.
YouTubeと勉強資料を見て、整理した内容を書きたいです.
1.円グラフを描く

ストローク-幅:半径の2倍

stroke-dasharray :

パイ図では、1つのパイはstroke−dasharrayで表される.

破線長(最初のパラメータ):円グラフのパーセント(n/1022 PI*r)

破線間の長さ(2番目のパラメータ):円周の値.2PIr

    <svg width="40" height="40" viewBox="0 0 40 40">
      <circle
        r="10"
        cx="20"
        cy="20"
        fill="transparent"
        stroke="tomato"
        stroke-width="20"
        stroke-dasharray="calc(40 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
      />
    </svg>

これができれば、パイ図は90度から始まります.
パイの図を上に移動してから始めなければなりません.
2.移動位置
cssの変換は位置を変えることができる.まず
回転で円を回転させるには、x軸で直径の長さ*2を下げます.
x軸方向に移動するのは90度回転しているので、垂直方向はx軸です.

シフト:変換(回転(-90)translate(40))

      <circle
        r="10"
        cx="20"
        cy="20"
        fill="transparent"
        stroke="tomato"
        stroke-width="20"
        stroke-dasharray="calc(40 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
        transform="rotate(-90)  translate(-40)"
      />

3.比例の決定
stroke-dasharray="calc(n*円周/100)円周"
stroke-dasharrayでnの値を変更することでスケールを決定できます.
すべてのスケールを決定すると、次のように円グラフが描画されます.

    <svg width="40" height="40" viewBox="0 0 40 40">
      <circle
        r="10"
        cx="20"
        cy="20"
        fill="transparent"
        stroke="tomato"
        stroke-width="20"
        stroke-dasharray="calc(100 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
        transform="rotate(-90)  translate(-40)"
      />
      <circle
        r="10"
        cx="20"
        cy="20"
        fill="transparent"
        stroke="pink"
        stroke-width="20"
        stroke-dasharray="calc(80 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
        transform="rotate(-90)  translate(-40)"
      />
      <circle
        r="10"
        cx="20"
        cy="20"
        fill="transparent"
        stroke="yellow"
        stroke-width="20"
        stroke-dasharray="calc(50 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
        transform="rotate(-90)  translate(-40)"
      />
    </svg>

の共通値は
共通fill、stroke-width、transformをg要素に入れ、childに継承させることで、コードの重複を減らすことができます.

    <svg width="40" height="40" viewBox="0 0 40 40">
      <g
        fill="transparent"
        strokeWidth="20"
        transform="rotate(-90) translate(-40)"
      >
        <circle
          r="10"
          cx="20"
          cy="20"
          stroke="tomato"
          strokeDasharray="calc(100 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
        />
        <circle
          r="10"
          cx="20"
          cy="20"
          stroke="pink"
          strokeDasharray="calc(80 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
        />
        <circle
          r="10"
          cx="20"
          cy="20"
          stroke="yellow"
          strokeDasharray="calc(50 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
        />
      </g>
    </svg>

を参照
http://tutorials.jenkov.com/svg/circle-element.html