Question

所以我有4个SVG圈子，我使用stroke-dash来掩盖。一般的想法是，他们应该根据他们的百分比构成一个完整的圈子。

我已经获得了每个片段的长度，当我手动旋转它们时，我发现这一切都加起来了。但我无法弄清楚如何计算每个段的旋转。 Under是一个jsbin链接，显示我已经走了多远：

此外，如果有更好的方法来解决这个问题，我很高兴听到它。唯一必须工作的是悬停效果，如示例所示。

顺便说一句，以下几行纯属猜测（你可能已经注意到了）：

var rotate = (Math.sin((c-prevRotate)/100) * Math.PI)*100; // ?

据我所知，这是我唯一需要帮助解决的问题。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

计算多个圆片段旋转

1 个答案: