Javascript 计算多个圆碎片旋转

因此，我有4个SVG圆圈，我使用

笔划划线

来遮罩。总的想法是，他们应该根据他们的百分比组成一个完整的循环

我已经得到了每一段的长度，当我手动旋转它们时，我看到它们都加起来了。但我不知道如何计算每段的旋转。下面是一个jsbin链接，显示我取得了多大进展：

另外，如果有更好的方法解决这个问题，我很乐意听到。唯一需要工作的是悬停效果，如示例所示

顺便说一下，下面这一行完全是胡乱猜测（正如您可能已经注意到的）：

据我所知，这是我唯一需要帮助才能弄清楚的

var-prevRotate=0；
$（'circle'）。每个（函数（i）{
var r=$（this.attr（'r'）；
var val=$（this.data（'perc'）；
var c=数学PI*（r*2）；
var pct=（（100-val）/100）*c；
变量旋转=（数学sin（（c-prevRotate）/100）*数学PI）*100；
$（this.css）({
strokeDasharray:c，
冲程偏移量：pct，
变换：“旋转（“+旋转+”度）”
});
prevRotate+=pct；
});
svg{width:300px；}
圈{
笔画宽度：3；
变换原点：中心；
}
圆圈：悬停{笔划宽度：5}
我做了一些更改，它起作用了：

var prevRotate = 0;
$('circle').each(function (i) {
  var r = $(this).attr('r');
  var val = $(this).data('perc');
  var c = Math.PI * (r * 2);

  var pct = ((100 - val) / 100) * c;
  var rotate = prevRotate;

  $(this).css({
    strokeDasharray: c,
    strokeDashoffset: pct,
    transform: 'rotate(' + rotate + 'deg)'
  });
  prevRotate += (360*val/100); 
});

如果我的回答是正确的，你能接受吗？：）
var prevRotate = 0;
$('circle').each(function (i) {
  var r = $(this).attr('r');
  var val = $(this).data('perc');
  var c = Math.PI * (r * 2);

  var pct = ((100 - val) / 100) * c;
  var rotate = prevRotate;

  $(this).css({
    strokeDasharray: c,
    strokeDashoffset: pct,
    transform: 'rotate(' + rotate + 'deg)'
  });
  prevRotate += (360*val/100); 
});