Javascript 运行时剪辑路径更改

Question

我可以在运行时更改元素的 ClipPath 属性。 但我无法使用计时器中递增的变量来更改属性值。

如何将x的值分配给下面粗体中多边形的这两个参数？

el.style.clipPath = "多边形(10% 0%, 100% 0, 100% 100%, 10% 100%)";

var x = 0;

function myTimer() 
{
    var el = document.getElementById("Screen_1_Dial_Left_LOW_slider_ID");
    el.style.clipPath = "polygon(10% 0%, 100% 0, 100% 100%, 10% 100%)";
    x++;
}

Answer 1

您可以使用字符串插值，如下所示：

var x = 0;

function myTimer() 
{
    var el = document.getElementById("Screen_1_Dial_Left_LOW_slider_ID");
    el.style.clipPath = `polygon(${x}% 0%, 100% 0%, 100% 100%, ${x}% 100%)`;
    x++;
}