SVG圆-动画片段？（甜甜圈图）

基本上，我的问题是iv'e创建了一个动态甜甜圈图表，其中自动生成段（class=“donut segment”）。我需要使所有分段从起点到终点同时设置动画。我做了一些相当广泛的搜索，但我找不到一个像我这样的例子。任何帮助都将不胜感激，或者仅仅是正确方向上的一点

我需要最终结果才能产生这种效果

---

已求解，将Stroke DashArray从“0和600”转换为其正确值，并将strokeDashOffset从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>