Javascript 笔划梯度

我试图在SVG笔划上设置一个渐变（从右到左）。给你

const path=document.querySelector（“#wave”）；
const animation=document.querySelector（“#moveTheWave”）；
常数m=0.512286623256592433；
函数buildWave（w，h）{
常数a=h/4；
常数y=h/2；
常量路径数据=[
“M”，w*0，y+a/2，
"c",，
a*m，0，
-（1-a）*m，-a，
a、 -a，
“s”，
-（1-a）*m，a，
a、 a,，
“s”，
-（1-a）*m，-a，
a、 -a，
“s”，
-（1-a）*m，a，
a、 a,，
“s”，
-（1-a）*m，-a，
a、 -a，
“s”，
-（1-a）*m，a，
a、 a,，
“s”，
-（1-a）*m，-a，
a、 -a，
“s”，
-（1-a）*m，a，
a、 a,，
“s”，
-（1-a）*m，-a，
a、 -a，
“s”，
-（1-a）*m，a，
a、 a,，
“s”，
-（1-a）*m，-a，
a、 -a，
“s”，
-（1-a）*m，a，
a、 a,，
“s”，
-（1-a）*m，-a，
a、 -a，
“s”，
-（1-a）*m，a，
a、 a,，
“s”，
-（1-a）*m，-a，
a、 -a
].加入（“”）；
setAttribute（'d'，pathData）；
var stroke=document.getElementById（“wave”）；
stroke.setAttribute（“stroke”，“#000”）；
}
buildWave（180120）
html，正文{
身高：100%；
保证金：0；
宽度：100%；
}
正文{
对齐项目：居中；
显示器：flex；
}
div{
对齐项目：居中；
显示器：flex；
高度：220px；
保证金：0自动；
宽度：100%；
}
svg{
保证金：0自动；
溢出：隐藏；
}
#挥手{
笔划数组：0 32 202 32；
动画：移动波浪4800ms线性无限；
}
@关键帧移动波浪{
0% { 
笔划偏移：0；
变换：translate3d（0,0,0）；
}
100% {
行程偏移：-266；
变换：translate3d（-180px，0，0）；
}
}
什么是时间梯度，什么是方向梯度？你只是想在形状上设置一个linearGradient吗？我想对关键帧说：“时间梯度”（因为他会根据公布的百分比变化），对linearGradient说“方向梯度”。但是我不能在CSS中为笔划添加属性背景，因为它已经是#wave的属性。。（对不起我的英语）