как представить процентные данные по круговому пути

Question

Мне нужно представить процентную дату, используя круговой путь.

Возможно, stroke-dashoffset необходимо изменить, но как рассчитать процент и установить stroke-dashoffset на это значение?

Например, если percent равно 25 - четверть круга должнабыть синим.

Примерно так:

$('button').on('click', function(){
  let percent = 25 + '%';
  $('.xpath').css('stroke-dashoffset', percent);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style = "width:90px; height:90px;">
	<svg viewBox="0 0 100 100" style="display: block; width: 100%;"><path d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#ddd" stroke-width="3" fill-opacity="0"></path><path class='xpath' d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#4598C9" stroke-width="5" fill-opacity="0" style="stroke-dasharray: 300, 300; stroke-dashoffset: 20;"></path></svg>
</div>
<br>
<button>CLICK</button>

Answer 1

Для этого вам нужно вычислить значение stroke-dasharray, чтобы вычислился периметр круга.Затем вам нужно определить деталь, которая показана синим цветом на основе этого процентного значения:

$('button').on('click', function() {
  let percent = 25;
  let dashArray = +$('.xpath').css('stroke-dasharray').split(',')[0].replace('px','');
  $('.xpath').css('stroke-dashoffset', (dashArray-(dashArray*percent/100)) + 'px');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:90px; height:90px;">
  <svg viewBox="0 0 100 100" style="display: block; width: 100%;"><path d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#ddd" stroke-width="3" fill-opacity="0"></path><path class='xpath' d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#4598C9" stroke-width="5" fill-opacity="0" style="stroke-dasharray: 300, 300; stroke-dashoffset: 20;"></path></svg>
</div>
<br>
<button>CLICK</button>