I just can not figure out how to fill the strip of green up to 100, will you help?)

enter image description here

<svg version="1.1" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="260" height="170"><desc>Created with Highcharts 4.2.3 /Highstock 4.2.3</desc> <defs> <clipPath id="highcharts-1"> <rect x="0" y="0" width="240" height="145"></rect> </clipPath> </defs> <rect x="0" y="0" width="260" height="170" fill="transparent" class=" highcharts-background"></rect> <path fill="#EEE" d="M 14 133.25 A 116 116 0 1 1 245.99994200000484 133.13400001933337 L 199.59996520000288 133.18040001160003 A 69.6 69.6 0 1 0 60.400000000000006 133.25 Z" stroke="silver" stroke-width="1" zIndex="0" visibility="visible"></path> <g class="highcharts-grid" zIndex="1"></g> <g class="highcharts-axis" zIndex="2"></g> <g class="highcharts-data-labels highcharts-series-0 highcharts-tracker" zIndex="2" visibility="visible" transform="translate(10,10) scale(1 1)" style=""> <g zIndex="1" style="" transform="translate(80,78)"></g> </g> <g class="highcharts-series-group" zIndex="3"> <g class="highcharts-series highcharts-series-0 highcharts-tracker" zIndex="0.1" transform="translate(10,10) scale(1 1)" style="" clip-path="url(#highcharts-1)"> <path fill="rgb(190,230,69)" d="M 4 123.24999999999999 A 116 116 0 0 1 213.77774134661007 54.97309886990841 L 176.26664480796603 82.28385932194504 A 69.6 69.6 0 0 0 50.400000000000006 123.24999999999999 Z" sweep-flag="0" stroke-linejoin="round" stroke-linecap="round"></path> </g> <g class="highcharts-markers highcharts-series-0" zIndex="0.1" transform="translate(10,10) scale(1 1)" clip-path="none"> </g> </g> <g class="highcharts-legend" zIndex="7"> <g zIndex="1"> <g></g> </g> </g> <g class="highcharts-axis-labels highcharts-yaxis-labels" zIndex="7"> <text x="39" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:76px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="149.25" opacity="1">0</text> <text x="221" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:76px;text-overflow:clip;" text-anchor="middle" transform="translate(0,0)" y="149.25000000000003" opacity="1">100</text> </g> </svg>

    1 answer 1

    For such things, it is best to use the property stroke-dasharray , which divides the boundary into specified intervals.

     function demo(){ var val = this.value || 0, bar = $(this).prev('svg').find('.progress-bar'), strokeLength = bar[0].getTotalLength(); bar.css('stroke-dasharray',strokeLength*val/100+','+strokeLength); } $('.controller').each(demo); $('.controller').on('input',demo); 
     *{ box-sizing:border-box; } svg{ width:240px; height:200px; border:1px solid; } .progress-bar{ fill:none; stroke:#cda; stroke-width:20px; } .progress-fill{ stroke-width:1; stroke:gray; fill:#eee; } text{ text-anchor:middle; } .controller{ vertical-align:top; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg> <path class="progress-fill" d="M19.5,100 a91,91 0 0 1 201,0 h-21 a69,69 0 0 0 -159,0 z"/> <path class="progress-bar" d="M30,100 a80,80 0 0 1 180,0" /> <text x="30" y="120">0</text> <text x="210" y="120">100</text> </svg> <input type="number" class="controller" min="0" max="100" strp="1" value="0" />