Javascript 通过java脚本逐个绘制SVG圆圈

我想一个接一个地画SVG圆形动画，我已经使用硬编码ID完成了这项工作，但我想让它成为动态的。我们可以按类使用它，也可以通过增加id来实现。另外，请记住，我必须在没有jQuery的情况下完成这项工作

var circle=document.getElementById（'C1'）；
var radius=圆。获取属性（“r”）；
var circleLength=2*Math.PI*半径；
circle.style.strokeDasharray=circleLength；
circle.style.strokedashcoffset=circleLength；
var circle2=document.getElementById（'C2'）；
圆圈2.style.opacity=0；
var radius2=circle2.getAttribute（“r”）；
var circleLength2=2*Math.PI*radius2；
circle2.style.strokeDasharray=circleLength2；
circle2.style.strokeDashoffset=circleLength2；
var circle3=document.getElementById（'C3'）；
圆圈3.style.opacity=0；
var radius3=circle3.getAttribute（“r”）；
var circleLength3=2*Math.PI*radius3；
circle3.style.strokeDasharray=circleLength3；
circle3.style.strokeDashoffset=circleLength3；
circle.addEventListener（“animationend”，myFunction）；
函数myFunction（）{
圆圈2.style.opacity=1；
circle2.style.animationDelay='3s'；
}
圆圈2.addEventListener（“动画结束”，myFunction2）；
函数myFunction2（）{
圆圈3.style.opacity=1；
圆圈3.style.animationDelay='6s'；
}

.circle{
动画：向前冲3秒；
}
@关键帧破折号{
到{
笔划偏移：0；
}
}

---

我认为您希望循环中的代码删除重复的代码。我尽可能地把它包好

var循环=[]；var circleLength=[]；var半径=[]；
对于（i=1；i<4；i++）{
圈[i]=document.getElementById（'C'+i）；
如果（i>1）{
圆形[i]。style.opacity=0；
}
半径[i]=圆[i]。获取属性（“r”）；
圆周长度[i]=2*Math.PI*半径[i]；
圆[i].style.strokeDasharray=circleLength[i]；
圆[i].style.strokedashcoffset=circleLength[i]；
如果（i==3）{
圆[1]。addEventListener（“animationend”，函数（）{
myFunction（2,3）；
}，假）；
圆[2]。addEventListener（“animationend”，函数（）{
myFunction（3,6）；
}，假）；
}
}
函数myFunction（索引，秒）{
圆[index].style.opacity=1；
圆[index].style.animationDelay=sec+'s'；
}

.circle{
动画：向前冲3秒；
}
@关键帧破折号{
到{
笔划偏移：0；
}
}