我需要在圓形進度條上顯示閾值指示器，我能夠使用圓形指示器指示該位置。但我需要顯示一個帶有閾值的線指示器。
例如，如果閾值為 70%，我必須顯示一個帶有閾值的線指示器。
關于如何完成的任何建議？也歡迎對可以使用的任何其他外觀提出建議。
當前作業版本 - 
預期外觀
uj5u.com熱心網友回復：
我會建議這樣的事情。我想儀表/儀表本身是容易的部分。在這里，我有一個stroke-dasharay可以設定為 0-100 之間的值。
我添加了更多閾值指示器，以便您可以在圓圈的左側和右側看到它們的外觀。基本上它只是一條線和一個旋轉的文本。在左側顯示文本時，需要將其旋轉 180 度。
<svg width="400" viewBox="0 0 100 100" fill="none" stroke-width="5" stroke-linecap="round">
<circle stroke="silver" cx="50" cy="50" r="40"/>
<circle transform="rotate(-90 50 50)" stroke="green" cx="50" cy="50" r="40" pathLength="100" stroke-dasharray="65 100"/>
<g transform="translate(50 50) rotate(-90) rotate(90)">
<line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
<text transform="translate(43 -1)" font-size="4" fill="black">25</text>
</g>
<g transform="translate(50 50) rotate(-90) rotate(135)">
<line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
<text transform="translate(43 -1)" font-size="4" fill="black">38</text>
</g>
<g transform="translate(50 50) rotate(-90) rotate(270)">
<line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
<text transform="translate(43 -1) rotate(180) translate(-5 -2)" font-size="4" fill="black">75</text>
</g>
<g transform="translate(50 50) rotate(-90) rotate(315)">
<line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
<text transform="translate(43 -1) rotate(180) translate(-5 -2)" font-size="4" fill="black">88</text>
</g>
</svg>互動版
var meter = document.getElementById('meter');
var threshold = document.getElementById('threshold');
document.forms.form01.addEventListener('change', e => {
let newval = e.target.value;
switch(e.target.name){
case 'val':
meter.setAttribute('stroke-dasharray', `${newval} 100`);
break;
case 'tval':
threshold.setAttribute('transform', `translate(50 50) rotate(-90) rotate(${3.6*newval})`);
let text = threshold.querySelector('text');
text.textContent = newval;
let transformStr = 'translate(43 -1)';
if(newval > 50) transformStr = ' rotate(180) translate(-5 -2)';
text.setAttribute('transform', transformStr);
break;
}
});<form name="form01">
<lable>Value: <input name="val" type="range" min="0" max="100" value="25"/></lable>
<lable>Threshold: <input name="tval" type="range" min="0" max="100" value="33"/></lable>
</form>
<svg width="400" viewBox="0 0 100 100" fill="none" stroke-width="5" stroke-linecap="round">
<circle stroke="silver" cx="50" cy="50" r="40"/>
<circle id="meter" transform="rotate(-90 50 50)" stroke="green" cx="50" cy="50" r="40" pathLength="100" stroke-dasharray="25 100"/>
<g id="threshold" transform="translate(50 50) rotate(-90) rotate(120)">
<line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
<text transform="translate(43 -1)" font-size="4" fill="black">33</text>
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441120.html
標籤：javascript css 反应 svg 进度条
上一篇：路徑內的SVG蒙版視頻