Javascript SVG绘制路径并用椭圆弧填充

我试着在一个旋转半径后面逐渐填充一个椭圆，真的，一个像时钟一样的计时器，填充在清扫手后面。我接近正确，但填充区域的圆弧会随着每次重新计算而移动

代码笔版本只是总结一下，我使用以下HTML开始：

<svg version="1.1" baseProfile="full" width="50%" height="50%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 3.2">
  <path id="pie" stroke="none" stroke-width=".01" fill="rgb(204, 50, 50)"
          d="M 1.5 1.7 V 1.5 .3 
             A 1.5 1.3 0 0 1 1.5 .2
             z"/>
  <line id="hand" stroke="black" stroke-width=".02"
           x1="1.5" y1="1.7" x2="1.5" y2=".2"/>
</svg>

以及以下JavaScript来旋转手并在其后面绘制/填充：

var sweep = document.getElementById("hand"),
    fill = document.getElementById("pie"),
    degrees = 0;
const Torads = Math.PI/180;

function rotateHand() {
  degrees += 45;
  sweep.setAttribute("transform", "rotate(" + degrees + " 1.5 1.7)");
  if (degrees <= 180) {
  fill.setAttribute("d", "M 1.5 1.7 V .4 A 1.4 1.3 0 0 1 " + ellipticalXcoords(Math.cos((degrees-90) * Torads)) + " " + ellipticalYcoords(Math.sin((degrees-90) * Torads)) + " z");
  } else {
  fill.setAttribute("d", "M 1.5 1.7 V .4 A 1.4 1.3 0 1 1 " + ellipticalXcoords(Math.cos((degrees - 90) * Torads)) + " " + ellipticalYcoords(Math.sin((degrees - 90) * Torads)) + " z");
  }

var sweep=document.getElementById（“hand”），
fill=document.getElementById（“pie”），
度=0；
常数Torads=Math.PI/180；
函数rotateHand（）{
度数+=45；
setAttribute（“变换”、“旋转”（+degrees+“1.51.7”）；
如果（degrees你在这里给自己的生活带来了困难。你不需要计算填充区域形状的增量变化，你可以使用与应用于规则圆的剪辑遮罩相同的形状，可以更容易地使用

我将这样做。请注意，圆形填充旋转了-90°，因此动画从圆形顶部开始，而不是从侧面开始。相应的+90°旋转应用于剪辑遮罩以解释这一点


var sweep=document.getElementById（“hand”），
fill=document.getElementById（“苹果填充”），
度=0；
常数Torads=Math.PI/180；
var动画=假；
函数rotateHand（）{
度数+=4；
如果（度>=360）{
clearInterval（动画）；
动画=假；
度=360度；
}
setAttribute（“变换”、“旋转”（+degrees+“1.51.7”）；
fill.setAttribute（“笔划数组”，度数*0.01309+”，20”）；
}
函数startAnimation（）{
如果（！设置动画）{
度=0；
设置动画=设置间隔（rotateHand，30）；
}
}
制作动画
如果您想知道系数
0.01309
是从哪里来的-这会将角度（以度为单位）转换为沿半径为0.75（2*π*0.75/360）的圆的路径长度≈ 0.01309）明白了：一些浏览器（认为它是旧的safari iOs）不会在90度处开始循环。解决方案：将循环转换为路径。@这看起来会起作用。我现在回想起来，我已经看到了掩蔽解决方案的描述，但我认为数学应该不会太难。但我认为这会很好。谢谢。