已解決430363個問題，去搜搜看，總會有你想問的

圓圈上的百分比動畫

首頁猿問圓圈上的百分比動畫

圓圈上的百分比動畫

JavaScript

呼喚遠方 2022-07-15 10:06:47

我有一個將百分比顯示為圓圈的代碼。是否有可能做一些事情讓動畫從頂部開始，向右，而不是像現在，它從右邊開始。這條線可以繞嗎？有沒有其他更好的代碼來做這樣的事情？我只對 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>

查看完整描述

2 回答

開滿天機

TA貢獻1786條經驗獲得超13個贊

正如我所評論的，您可以旋轉 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>

反對回復 2022-07-15

婷婷同學_

TA貢獻1844條經驗獲得超8個贊

首先，歡迎使用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);

}

反對回復 2022-07-15

2 回答
0 關注
107 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

圓圈上的百分比動畫

圓圈上的百分比動畫

2 回答

添加回答