计算仪表值以绘制仪表 svg 路径的公式

Question

这是我的仪表，但我不知道一个公式来呈现这个仪表的值。有人可以帮我解决这个问题吗？

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="145" viewBox="0 0 200 145">
    <defs>
        <linearGradient id="b" x1="5.165%" y1="76.151%" y2="75.039%">
            <stop offset="0%" stop-color="#E9F1FF"/>
            <stop offset="100%" stop-color="#DBE7FF"/>
        </linearGradient>
		<linearGradient id="c" x1="63.192%" x2="36.891%" y1="13.157%" y2="100%">
            <stop offset="0%" stop-color="#FF8600"/>
            <stop offset="100%" stop-color="#FFC86A"/>
        </linearGradient>
        <path id="a" d="M100 0c55.228 0 100 44.772 100 100 0 15.954-3.736 31.036-10.382 44.418l-17.912-8.906c5.31-10.7 8.294-22.757 8.294-35.512 0-44.183-35.817-80-80-80s-80 35.817-80 80c0 12.843 3.027 24.98 8.405 35.735l-17.912 8.906C3.778 131.204 0 116.043 0 100 0 44.772 44.772 0 100 0z"/>
    </defs>
    <g fill="none" fill-rule="evenodd">
        <mask id="c" fill="#fff">
            <use xlink:href="#a"/>
        </mask>
        <use fill="url(#b)" xlink:href="#a"/>
        <g stroke="#FFF" stroke-width="5" mask="url(#c)" opacity=".3">
            <path d="M99.5 97V0M100.252 97.061L110.392.593M100.16 97.06l21.821-94.513M100.885 97.276l31.58-91.715M100.8 97.241l42.523-87.183M101.465 97.6l51.402-82.26M101.399 97.536l61.044-75.383M101.976 98.025l68.589-68.59M102.463 98.6l75.383-61.043M102.4 98.536l82.26-51.403M102.759 99.199l87.183-42.522M102.725 99.115l91.715-31.58M102.94 99.839l94.513-21.82M102.939 99.747l96.468-10.139M103 100.5h97M102.939 101.253l96.469 10.139M102.94 101.16l94.513 21.821M102.724 101.884l91.715 31.58M102.759 101.8l87.183 42.523M102.399 102.465l82.26 51.402M102.464 102.4l75.383 61.044M101.974 102.975l68.59 68.59M101.4 103.464l61.044 75.383M101.464 103.4l51.402 82.26M100.801 103.76l42.522 87.182M100.884 103.724l31.58 91.716M100.161 103.94l21.82 94.513M100.253 103.939l10.139 96.468M99.5 104v97M98.747 103.939l-10.139 96.468M98.839 103.94l-21.82 94.513M98.116 103.724l-31.58 91.716M98.199 103.76l-42.522 87.182M97.536 103.4l-51.402 82.26M97.6 103.464l-61.044 75.383M97.026 102.975l-68.59 68.59M96.536 102.4l-75.383 61.044M96.601 102.465l-82.26 51.402M96.241 101.8L9.058 144.324M96.276 101.884l-91.715 31.58M96.06 101.16L1.548 122.982M96.061 101.253L-.408 111.392M96 100.5H-1M96.061 99.747L-.407 89.608M96.06 99.839L1.548 78.019M96.275 99.115L4.56 67.535M96.241 99.199L9.058 56.677M96.6 98.536L14.34 47.133M96.537 98.6L21.154 37.558M97.024 98.025l-68.589-68.59M97.601 97.536L36.557 22.153M97.535 97.6L46.133 15.34M98.2 97.241L55.676 10.058M98.115 97.276L66.535 5.56M98.84 97.06L77.018 2.548M98.748 97.061L88.608.593"/>
        </g>
    </g>
	<path fill="none" fill-rule="evenodd" stroke="url(#c)" stroke-width="20" d="M72.705 14.214C36.343 25.773 10 59.81 10 100c0 14.45 3.405 28.105 9.457 40.205"/>
</svg>

Answer 1

正如@enxaneta 指出的，你应该更好地使用笔画。

要在仪表上显示基于百分比的值段，您首先需要以下属性：
stroke-dasharray：定义段的长度
stroke-dashoffset：使您能够移动段
@ 987654324@: 更改应用于笔划-破折号属性的计算值比率

pathlength="100" 显示 25/100 - 很有用，如果您使用百分比（例如，由某些 api 检索）

pathlength="100"
stroke-dashoffset="0" 
stroke-dasharray="25 100"

pathlength="12" 显示 3/12 - 如果您获得“步进”整数值，则非常方便

pathlength="12"
stroke-dashoffset="0" 
stroke-dasharray="3 12"

MDN: pathLength

这是使用笔划重建的量规：

svg{
border:1px solid #ccc;
width:33%
}   

.gauge-segment{
    transition: 0.3s;
}
        
svg:hover .gauge-segment{
    stroke-dashoffset:-33;
    stroke-dasharray: 66 100;
}

<p>Hover will change the gauge segment</p> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 120">
    <defs>
        <linearGradient id="gradientBackground" gradientTransform="rotate(30)">
            <stop offset="0%" stop-color="#E9F1FF"/>
            <stop offset="100%" stop-color="#DBE7FF"/>
        </linearGradient>       
        <linearGradient id="gradientSegment" x1="63.192%" x2="36.891%" y1="13.157%" y2="100%">
            <stop offset="0%" stop-color="#FF8600"/>
            <stop offset="100%" stop-color="#FFC86A"/>
        </linearGradient>   
    </defs>
    <!-- gauge path -->
    <symbol id="stroke">
        <path  pathlength="100" fill="none"  stroke-width="10"  d="M55.6,103C52,96.1,50,88.3,50,80
        c0-27.6,22.4-50,50-50s50,22.4,50,50c0,8.3-2,16.1-5.6,23"/>
    </symbol>
    
    <!-- gauge background -->
    <g id="gaugeBackground" >
        <use id="gaugeBackgroundColor" href="#stroke" stroke="url(#gradientBackground)"></use>
        <use id="gaugeBackgroundDash" href="#stroke" stroke="#E9F1FF" stroke-dashoffset="0" stroke-dasharray="1 1" ></use>
    </g>

    <!-- percentages -->
    <g id="gaugeSegments" > 
      <use id="segment01" class="gauge-segment" href="#stroke" filter="" stroke="url(#gradientSegment)" stroke-dashoffset="0" stroke-dasharray="33 100"></use>
    </g>
</svg>