Calculate the rotation of a fragment of multiple circles
So, I have 4 SVG circles that I use stroke-dash
for masking. And the general idea is that they should be one full circle depending on their percentage.
I got the length of each segment and when I rotate them by hand I see it all add up. But I cannot figure out how to calculate the rotation of each segment. Below the jsbin link shows how far I've gotten:
http://jsbin.com/lutodomujo/1/
Also, if there is a better way to solve this problem, I would be glad to hear it. The only thing that should work is the hover effect as shown in the example.
By the way, the following line is a purely wild guess (as you might have noticed):
var rotate = (Math.sin((c-prevRotate)/100) * Math.PI)*100; // ?
And this, as far as I know, is the only thing I need for help.
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>
source to share
I made some changes and it works:
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);
});
source to share