圆圈上的百分比动画

Question

我有一个将百分比显示为圆圈的代码。是否有可能做一些事情让动画从顶部开始，向右，而不是像现在，它从右边开始。这条线可以绕吗？有没有其他更好的代码来做这样的事情？我只对 vanillaJS 感兴趣。var circle = document.querySelector('circle');var radius = circle.r.baseVal.value;var circumference = radius * 2 * Math.PI;circle.style.strokeDasharray = circumference;circle.style.strokeDashoffset = circumference;function setProgress(percent) {   var offset = circumference - percent / 100 * circumference;   circle.style.strokeDashoffset = offset;}setProgress(60);<svg class="progress-ring" width="120" height="120">   <circle class="progress-ring__circle" stroke="#000" stroke-width="8" fill="transparent" r="56" cx="60" cy="60"></svg>

Answer 1

正如我所评论的，您可以旋转 svg 元素 transform:rotate(-90deg)。或者，您可以旋转圆圈。您也可以使用路径而不是圆圈并使其从顶部开始。如果你想使用路径，你可以这样做：

在这种情况下，路径从顶部开始M60,4 接下来是一个半径均为 56 的弧。第一个弧结束于 60,116 跟随第二个弧A56,56,0 0 1 60,4，最后你关闭路径z

因为circumference你不需要知道半径。您可以执行var circumference = circle.getTotalLength();wheregetTotalLength是返回路径总长度的方法。

var circle = document.querySelector('path');

var circumference = circle.getTotalLength();

circle.style.strokeDasharray = circumference;

circle.style.strokeDashoffset = circumference;

function setProgress(percent) {

   var offset = circumference - percent / 100 * circumference;

   circle.style.strokeDashoffset = offset;

}

setProgress(60);

<svg class="progress-ring" width="120" height="120">

     <path fill="none" class="progress-ring__circle" stroke="black" stroke-linecap="round" stroke-width="8" d="M60,4A56,56,0 0 1 60,116A56,56,0 0 1 60,4z" /> 

</svg>

Answer 2

首先，欢迎使用StackOverflow。

我认为你在这里有一个三角问题。你的代码有一个三角圆，它像右边的其他三角圆一样开始：

https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Unit_circle_angles_color.svg/1200px-Unit_circle_angles_color.svg.png

一个简单的解决方案是用 CSS 旋转你的圆圈：

svg{

   transform: rotate(-90deg);

}