我想為成績創建一個虛線進度圈。我想使最大等級的破折號函式的長度。（例如：如果等級是 3.5/5，則破折號的長度為 24px）。
問題是第一個破折號（右上角的那個）不是想要的長度。
<svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="_getViewBox()">
<!-- The grey circle plain for background-->
<path
#background
fill="none"
[style.stroke-width]="stroke"
[style.stroke]="'#EAEAEA'"
[attr.transform]="getPathTransform()"/>
<!-- The blue circle plain for progress -->
<path
#path
fill="none"
[style.stroke-width]="stroke"
[style.stroke]="resolveColor(color)"
[attr.transform]="getPathTransform()"/>
<!-- The white dashed circle for delimitation of dashes -->
<path
#dash
fill="none"
[style.stroke-width]="stroke"
[style.stroke]="'#ffffff'"
stroke-dasharray="4.3,23.7"
[attr.transform]="getPathTransform()"/>
</svg>
請注意，如果我將此值保留在最后一條路徑上 > stroke-dasharray="4.3,23.7" 我會得到：
但這只是因為我遇到了將半徑設為 70 的好值。因為如果我想更改它（例如使其成為最高等級的函式），我有這個：
我想要的是對破折號的數量和破折號的長度有一個一致的值，我有點迷茫，我不知道該怎么做
uj5u.com熱心網友回復：
在此示例中，我使用遮罩來創建 stroke-dasharray。dasharray 是根據 max-score (total) 計算的。破折號之間總是有 5 個單位的間隙（總/路徑長度為 1000）。
然后將蒙版應用于兩個圓圈。灰色圓圈始終是一個完整的圓圈，而 DarkTurquoise 圓圈的長度取決于分數。
兩個圓圈都旋轉了 -90 度，因此分數 0 位于 12 點處。
const c1 = document.getElementById('c1');
const c2 = document.getElementById('c2');
const t1 = document.getElementById('t1');
const update = (total, score) => {
c1.setAttribute('stroke-dasharray', `${(1000-total*5)/total} 5`);
c2.setAttribute('stroke-dasharray', `${1000/total*score} 1000`);
t1.textContent = `${score}/${total}`;
};
document.forms.form01.total.addEventListener('change', e => {
let total = parseInt(e.target.value);
let score = parseInt(e.target.form.score.value);
e.target.form.score.setAttribute('max', total);
if (score >= total) score = total;
update(total, score);
});
document.forms.form01.score.addEventListener('change', e => {
let total = parseInt(e.target.form.total.value);
let score = parseInt(e.target.value);
update(total, score);
});body {
display: flex;
}
form {
display: flex;
flex-direction: column;
}<form name="form01">
<label>Total: <input name="total" type="range" min="5" max="30" value="10"/></label>
<label>Score: <input name="score" type="range" min="0" max="10" value="5"/></label>
</form>
<svg viewBox="0 0 100 100" width="250" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask01">
<circle id="c1" cx="50" cy="50" r="40" fill="none" stroke="white" stroke-width="10" stroke-dasharray="95 5" pathLength="1000"/>
</mask>
</defs>
<g transform="rotate(-90 50 50)">
<circle mask="url(#mask01)" cx="50" cy="50" r="40" fill="none" stroke="Gainsboro" stroke-width="10" />
<circle id="c2" mask="url(#mask01)" cx="50" cy="50" r="40" fill="none" stroke="DarkTurquoise" stroke-width="10" stroke-dasharray="500 1000" pathLength="1000" />
</g>
<text id="t1" x="50" y="50" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" fill="DarkTurquoise">5/10</text>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/414828.html
標籤：
上一篇：如何使用SVG制作陣列