javascript - 如何在圆形路径上显示百分比数据

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>