Animation 为SVG路径d设置动画=。。。无笔划坐标

我正在尝试在SVG中设置以下GIF的动画

代码：

---

也许最简单的解决方案是使用圆作为遮罩。然后为圆的虚线阵列设置动画

---

这里是路径d解决方案，有两个圆弧，没有笔划，仅填充：

设r=90，
rx=70/90，
ry=85/90，
circ=Math.PI*2；
requestAnimationFrame（绘制）
函数图（t）{
t=（t/1000）%1；
设a=t*circ，
la=a%circ>Math.PI？1:0，
x=r*Math.cos（a），
y=r*Math.sin（a）；
path.setAttribute（“d”[
“M”，r，0，
“A”，r，r，0，la，1，x，y，
“L”，rx*x，ry*y，
“A”，r*rx，r*ry，0，la，0，r*rx，0，
“Z”
].加入（“”）；
path.setAttribute（“不透明度”，1-t）；
请求动画帧（绘制）；
}