SVG圈 - 动画片段？ （甜甜圈图）
问题描述：
<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>
基本上我的问题是iv'e创建了一个动态的甜甜圈图表段自动生成（class =“甜甜圈段”）。我需要将所有片段从起点到终点同时制作成动画。我已经做了一些相当广泛的搜索，但我找不到像我的例子。任何帮助都将不胜感激，或者只是一个正确的方向。SVG圈 - 动画片段？ （甜甜圈图）
我需要的最终结果有这样的效果 https://codepen.io/ksksoft/pen/xsnmp
答
解决，转变卒中DashArray从“0和600”到他们正确的价值观，同时也转变了strokeDashOffset从0到其应有的价值