第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

圓圈上的百分比動(dòng)畫

圓圈上的百分比動(dòng)畫

呼喚遠(yuǎn)方 2022-07-15 10:06:47
我有一個(gè)將百分比顯示為圓圈的代碼。是否有可能做一些事情讓動(dòng)畫從頂部開始，向右，而不是像現(xiàn)在，它從右邊開始。這條線可以繞嗎？有沒有其他更好的代碼來(lái)做這樣的事情？我只對(duì) 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 回答

?
開滿天機(jī)

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超13個(gè)贊

正如我所評(píng)論的，您可以旋轉(zhuǎn) svg 元素 transform:rotate(-90deg)。或者，您可以旋轉(zhuǎn)圓圈。您也可以使用路徑而不是圓圈并使其從頂部開始。如果你想使用路徑，你可以這樣做：


在這種情況下，路徑從頂部開始M60,4 接下來(lái)是一個(gè)半徑均為 56 的弧。第一個(gè)弧結(jié)束于 60,116 跟隨第二個(gè)弧A56,56,0 0 1 60,4，最后你關(guān)閉路徑z


因?yàn)閏ircumference你不需要知道半徑。您可以執(zhí)行var circumference = circle.getTotalLength();wheregetTotalLength是返回路徑總長(zhǎng)度的方法。


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>


查看完整回答
反對(duì) 回復(fù) 2022-07-15
?
婷婷同學(xué)_

TA貢獻(xiàn)1844條經(jīng)驗(yàn) 獲得超8個(gè)贊

首先，歡迎使用StackOverflow。

我認(rèn)為你在這里有一個(gè)三角問(wèn)題。你的代碼有一個(gè)三角圓，它像右邊的其他三角圓一樣開始：

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

一個(gè)簡(jiǎn)單的解決方案是用 CSS 旋轉(zhuǎn)你的圓圈：

svg{

   transform: rotate(-90deg);

}


查看完整回答
反對(duì) 回復(fù) 2022-07-15
  • 2 回答
  • 0 關(guān)注
  • 112 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)