0
<svg width="210px" height="210px" viewBox="0 0 210 210" class="donut">
<circle class="donut-ring" cx="105" cy="105" r="95" fill="transparent" stroke="black" stroke-width="20"></circle>
<circle class="donut-segment" cx="105" cy="105" r="95" fill="transparent" stroke="#1a1a1a" stroke-width="20" stroke-dasharray="149.22565104551518 447.67695313654554" stroke-dashoffset="150"></circle>
<circle class="donut-segment" cx="105" cy="105" r="95" fill="transparent" stroke="#333333" stroke-width="20" stroke-dasharray="149.22565104551518 447.67695313654554" stroke-dashoffset="597.6769531365455"></circle>
<circle class="donut-segment" cx="105" cy="105" r="95" fill="transparent" stroke="#434343" stroke-width="20" stroke-dasharray="298.45130209103036 298.45130209103036" stroke-dashoffset="448.45130209103036"></circle>
</svg>
基本的に私の問題は、セグメントが自動的に生成される動的ドーナツチャート（class = "ドーナツセグメント"）を作成したことです。すべてのセグメントを開始点から終了点まで同時にアニメーション化する必要があります。 Iv'eはかなり広い検索をしましたが、私のような例は見つけられません。どんな援助も大いに評価されるか、正しい方向に向かうだけです。SVGサークル - アニメーションセグメント？ （ドーナツチャート）
私は彼らの適切な値に「0から600」から https://codepen.io/ksksoft/pen/xsnmp