我无法使用 JavaScript 修改依赖于 window.scrollY 的 clip-path 值

Question

我正在尝试修改基于滚动的图像的剪辑路径值。该函数适用于其他属性（例如我尝试使用宽度）但不适用于剪辑路径。

CSS：

#blue-line{
    width: 100vw;
    height: 4rem;
    bottom: -2rem;
    clip-path: inset(0px 0px 0px 100%);
}

JS：

blueLine = document.getElementById('blue-line')    
window.addEventListener("scroll", function(){
        let currentPosition = window.scrollY
let value = 100 - currentPosition/2
console.log(value)

blueLine.style.clipPath = "inset(0px 0px 0px"+ value +"%);"

let cl= window.getComputedStyle(blueLine).getPropertyValue("clip-path");
console.log(cl)
    })

我希望 clip-path 的最后一个值随着滚动值的增加而减小。 console.log 显示 value 变量发生变化，但 clip-path 值未被函数更改。

提前致谢