Javascript SVG为圆环周围的虚线设置动画

我想画一个圆的直线动画。我需要这个在移动设备上工作，所以选择了SVG。我有一个完美的工作示例，但它效率很低，并且会使页面上的其他动画结巴

这就是我目前拥有的和我正在努力实现的目标：

（功能（）{
var i=0，
圆圈=document.getElementById（'bean-halo'），
角度=0，
半径=167，
间隔=20，
d、 弧度x，y，e；
window.timer=window.setInterval（函数（）{
角度-=5；
角度%=360；
弧度=（角度/180）*Math.PI；
x=250+数学余弦（弧度）*半径；
y=250+数学正弦（弧度）*半径；
e=circle.getAttribute（'d'）；
d=e+（i==0？'M'：'L'）+x+''+y；
如果（角度==-5&&i！==0）{
窗口清除间隔（窗口计时器）；
this.beanHaloisDrawn=1；
}
circle.setAttribute（'d'，d）；
i++；
}.绑定（此），间隔）；
})()

我想使用以下技术或类似技术，但对SVG了解不够，无法做到这一点：

我也曾想过用一条动画线来掩盖一条静态虚线，但我也不知道怎么做

任何帮助都将不胜感激

---

更新：解决方案必须在以图像为背景的元素上运行。

只处理一个圆的数组怎么样

<svg class="bean-halo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
   viewBox="0 0 500 500"
   preserveAspectRatio="xMidYMid"
   style="width:100%; height:100%; position:absolute; top:0; left:0;">

    <circle cx="200" cy="200" r="167" id="bean-halo" fill="none" stroke="#FF0000" stroke-linecap="round" stroke-width="2.5" stroke-dasharray="0.1,20000" />
</svg>

如果你不想使用javascript，你必须通过创建一个包含所有中间步骤的大型动画来完成插值。我已经完成了下面的4个步骤，但你明白要点了。不过，您可以使用javascript和循环创建属性

<svg class="bean-halo" xmlns="http://www.w3.org/2000/svg" 

xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
   viewBox="0 0 500 500"
   preserveAspectRatio="xMidYMid"
   style="width:100%; height:100%; position:absolute; top:0; left:0;">

    <circle cx="200" cy="200" r="167" stroke-width="1" stroke="red" fill="white">

        <animate attributeName="stroke-dasharray" 

values="1,10,0,20000;1,10,1,10,0,20000;1,10,1,10,1,10,0,20000;1,10,1,10,1,10,1,10,0,20000" 

dur="4s" repeatCount="1" fill="freeze" />
   </circle>
</svg>

---

使用两个圆圈的动画技巧，无需编码：-

<svg width="400" height="400" viewBox="0 0 400 400" >
    <circle cx="200" cy="200" r="167" stroke-dasharray="1,6" stroke-width="1"  stroke="red" fill="white" />
    <circle cx="200" cy="200" r="167" stroke-dasharray="1200,1200 " stroke-width="3" stroke-dashoffset="0" stroke="white" fill="none">
       <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="1200" dur="4s" repeatCount="1" fill="freeze" />
    </circle>
</svg>

看起来棒极了！有没有办法让这些线看起来像点？非常聪明，当然前提是圆不是画在其他任何东西的上面。按你原来的问题中已经画过的画点。啊，该死的。圆圈将绘制在图像上：/Yeah，这个动画技巧有一些警告，就是用背景图像遮罩顶部圆圈的边界，使其看起来无缝。这很好，但我希望不要使用setInterval

<svg class="bean-halo" xmlns="http://www.w3.org/2000/svg" 

xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
   viewBox="0 0 500 500"
   preserveAspectRatio="xMidYMid"
   style="width:100%; height:100%; position:absolute; top:0; left:0;">

    <circle cx="200" cy="200" r="167" stroke-width="1" stroke="red" fill="white">

        <animate attributeName="stroke-dasharray" 

values="1,10,0,20000;1,10,1,10,0,20000;1,10,1,10,1,10,0,20000;1,10,1,10,1,10,1,10,0,20000" 

dur="4s" repeatCount="1" fill="freeze" />
   </circle>
</svg>

<svg width="400" height="400" viewBox="0 0 400 400" >
    <circle cx="200" cy="200" r="167" stroke-dasharray="1,6" stroke-width="1"  stroke="red" fill="white" />
    <circle cx="200" cy="200" r="167" stroke-dasharray="1200,1200 " stroke-width="3" stroke-dashoffset="0" stroke="white" fill="none">
       <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="1200" dur="4s" repeatCount="1" fill="freeze" />
    </circle>
</svg>