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>

如何在循环路径上显示百分比数据

1 个答案: