如何用react动态描绘一个svg的线条？

Question

前提：svg是用AI临摹下来的，线条32根，每根线条长度未知

动态描绘svg：给每个线条增加属性

`stroke-dasharray`，`stroke-dashoffset`

然后给每个线条增加属性

transition: stroke-dashoffset 6s ease-in-out;
stroke-dashoffset: 0;

我暂时想到就是遍历svg增加属性，再延时遍历增加属性
有没有什么好的办法？