时间戳

首页 > 解决方案 > 圆圈上的百分比动画

javascript - 圆圈上的百分比动画

问题描述

我有一个将百分比显示为圆圈的代码。是否有可能做一些事情让动画从顶部开始，向右，而不是像现在，它从右边开始。这条线可以绕吗？有没有其他更好的代码来做这样的事情？我只对 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>

标签： javascripthtmlcsssvg

解决方案

正如我所评论的，您可以旋转 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>

推荐阅读