我正在構建一個代表用戶級別的進度圈，最高為3級。它的周圍有三個破折號。一條與每個破折號重疊的暗線將代表用戶的進度。如果用戶是第一級，第一條破折號應該與之重疊，其數額等于（他們當前的經驗/到下一級的總經驗）。如果用戶是第二級，第一個破折號應該完全重疊，第二個破折號應該和上面一樣，以此類推。我已經用以下代碼建立了我的SVG圓圈：
<svg。
width="240"/span>
高度="240"/span>
viewBox="0 0 240 240"。
strokeWidth="2px"。
strokeDasharray="220 10"。
strokeDashoffset="50"。
>
< circle cx="120" cy="120" r="110" fill="白色" stroke="松石" />
</svg>
這個圖片代表了一個處于第二級的用戶，大約在第三級的一半。
我怎樣才能計算出一個<path>來與圓圈重疊并顯示用戶的進度呢？
uj5u.com熱心網友回復：
這就是你如何用一個弧形路徑來做的。從圓的底部到X軸上的 1個單位畫弧。設定pathLength="100"，這樣你就可以適當地計算出所需的破折號陣列。然后確保你的破折號陣列的總和為100。
注意--你不能在此方法中使用圓形線帽--Chrome中存在一個錯誤，它會在筆畫-破折號陣列的末端添加一個錯誤的線帽。
。<svg
width="240px"/span>
高度="240px"。
viewBox="0 0 240 240"。
stroke-width="4"/span>
stroke-dasharray="220 10"/span>
stroke-dashoffset="50"。
stroke-lineecap ="none">
< circle cx="120" cy="120" r="110" fill="白色" stroke="松石" />
< path pathLength="100"/span> d="M120 230 a 110 110 0 1 1 1 0" stroke="red" fill="none" stroke-width="8" stroke-dasharray="0 1 32 1 15 50" stroke-dashoffset="0"/>
</svg>/span>uj5u.com熱心網友回復：
我質疑你的設計的可讀性：
這個設計是基于谷歌分析師的圖表：
所有HTML都需要：
<script src="https://progress-circle. github.io/element.js"></script>
<progress-circle edge="灰色">
<style>
svg {
font: 16px arial;
height: 180px;
}
</style>>
<progress value="75%" stroke="green"> 第一級</progress>
<progress value="60%" stroke="橙"> 二級</進展>
<progress value="50%" stroke="orangered"> 第三級</progress>
</progress-circle>/span>uj5u.com熱心網友回復：
在這里你可以通過設定stroke-dasharray來控制每個路徑的長度。第一個數字是長度(在0和94之間(2*PI*45/3=94))，第二個數字是筆畫之間的空間(這應該剛好超過284)。
在這個例子中，紅色路徑的長度為50%。你需要對這些數字進行一些實驗。
。var dist = 6;
console.log('Length of 1/3 circle:', Math。 round(2 * Math. PI * 45 / 3）-dist）。)
console.log('Rotation <g> slightly:',-Math. round(2 * Math. PI * 45 / 12）-（dist/2））；<div id="progress"> //span>
< svg viewBox="0 0 100 100" width="300"/span> height="300"/span>>
<g transform="translate(50 50) rotate(-27)">
< path transform="rotate(0)" d="M 45。 0 A 45,45 0 0 1 0,45 45,45 0 0 1 -45,0 45,45 0 0 1 0,-45 45,45 0 0 1 45, 0 Z" stroke-width="5" stroke- dasharray="44 400" stroke-dashoffset="0" stroke="red" fill="none" strok-lineecap="round"/>
< path transform="rotate(120)" d="M 45。 0 A 45,45 0 0 1 0,45 45,45 0 0 1 -45,0 45,45 0 0 1 0,-45 45,45 0 0 1 45, 0 Z" stroke-width="5" stroke- dasharray="88 400" stroke-dashoffset="0" stroke="navy" fill="none" strok-lineecap="round"/>
< path transform="rotate(240)" d="M 45。 0 A 45,45 0 0 1 0,45 45,45 0 0 1 -45,0 45,45 0 0 1 0,-45 45,45 0 0 1 45, 0 Z" stroke-width="5" stroke- dasharray="88 400" stroke-dashoffset="0" stroke="橙色" fill="none" strok-lineecap="round"/>
</g>
</svg>/span>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/320130.html
標籤：