Как изменить цвет заливки svg при onScroll?

percent.addEventListener("input",()=>{ 
  let val = ~~(percent.value); 
  let _var = map(100-val,0,100,3,27); 
  txt.textContent = val+"%"; 
  pth.setAttributeNS(null,"d",`M3,27H27V${_var}H3z`) 
}) 
 
function map(n, a, b, _a, _b) { 
  let d = b - a; 
  let _d = _b - _a; 
  let u = _d / d; 
  return _a + n * u; 
}

svg{border:1px solid; font-size:10px; background:lightblue} 
[type="range"]{width:150px;}

<svg viewBox="0 0 30 30" width="150"> 
  <g style="isolation: isolate;"> 
  <path d="M3,27H27V3H3z" fill="white" /> 
  <path id="pth" d="M3,27H27V15H3z"  /> 
  <text id="txt" x="15" y="15" dominant-baseline="middle" text-anchor="middle" fill="white" style="mix-blend-mode: difference;">50%</text> 
  </g> 
</svg> 
 
 
<p><input id="percent" type="range" value="50" /></p>