显示特定地图内的水填充

Question

我想使用javaScript和JQuery在Karnataka地图内​​逐渐显示水的填充。它应该具有最大值和最小值，并且应该以百分比计算所有内容。例如：如果最大值为300且最小值为60，则应开始计算并仅填充水直到地图的20％（60/300 * 100）。如何使用JQuery来做到这一点。我已经完成了一个简单的循环，代码如下。

＆＃13;

＆＃13;

let total = document.querySelector("input[id=total]");
let correct = document.querySelector("input[id=correct]");
let getPercentage = document.querySelector("button");
let score = document.querySelector("div[id=score]");
let p_value = document.querySelector("p[id=value]");
let content = document.querySelector("span");
getPercentage.onclick = (evt) => {
    let percentage = (parseInt(correct.value)/parseInt(total.value))*100;
    p_value.innerHTML = Math.floor(percentage)+"%";
    var  white_per=  100 - percentage ;
    score.style.background = 'linear-gradient(0deg,green ' + percentage +'%,white ' + percentage + '%)';
}

＆＃13;

#main{
    position: relative;
    top:0px;
    width: 200px;
    height: 200px;
    background-size: 200px 300px;
    background-repeat: no-repeat;
    border-radius: 100%;
    border:18px solid darkgrey;
  /*	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
  */
}

#score{	
  position : absolute;
  height : 100%;
  width : 100%;
  border-radius: 100%;
  background : linear-gradient(0deg, lightblue 75%,white 25% );
}

＆＃13;

<div id="main">
  <div id="score">
    <p id="value"></p>
  </div>
</div>
<div style="position:relative;top:20px;">
  Enter TotalMarks              : <input id="total" type="text"/></br>
  Enter CorrectAnswer Marks     : <input id="correct" type="text"/></br>
  <button>getPercentage</button>
<div>

＆＃13;

＆＃13;

＆＃13;