javascript - 计算多个圆片段旋转

Question

所以我有 4 个 SVG 圆圈，我正在使用 stroke-dash 来屏蔽它们。一般的想法是，他们应该根据他们的百分比组成一个完整的圆圈。

我已经获得了每个片段的长度，当我手动旋转它们时，我发现它们全部加起来了。但是我不知道如何计算每个段的旋转。下面是一个 jsbin 链接，显示我已经走了多远:

http://jsbin.com/lutodomujo/1/

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

顺便说一句，下面这行纯属胡乱猜测(您可能已经注意到):

var rotate = (Math.sin((c-prevRotate)/100) * Math.PI)*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 = (Math.sin((c-prevRotate)/100) * Math.PI)*100;

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

svg { width: 300px; }
circle {
  stroke-width: 3;
  transform-origin: center;
}
circle:hover {stroke-width: 5}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 164 164">
  <circle fill="none" stroke="#A5D2C6" cx="82" cy="82" r="80" data-perc="40"/>
  <circle fill="none" stroke="#000000" cx="82" cy="82" r="80" data-perc="30"/>
  <circle fill="none" stroke="#EBE6B7" cx="82" cy="82" r="80" data-perc="20"/>
  <circle fill="none" stroke="#F1AAA6" cx="82" cy="82" r="80" data-perc="10"/>
</svg>

Answer 1

我做了一些改变，它起作用了:

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); 
});