如何根据百分比填充svg路径？

Question

我正在使用线性渐变来表示已完成任务的百分比。如您在上面看到的，其计算不正确。目前，我只是在现有路径上添加另一条路径。 有什么办法可以显示正确的百分比？还是有其他方法可以显示百分比？？

-

这是我的代码中的link。

Answer 1

您应该能够回收您的computeTextRotation函数，以将gradientTransform='rotate()'与计算出的角度相加。

grad.attr('gradientTransform' , function(d) {
  var angle = computeTextRotation(d);
  return `rotate(${angle + 90})`
})

Codepen