中风SVG的梯度

Question

我正在尝试在SVG笔划上设置渐变（从右到左）。这是my codepen。

const path = document.querySelector('#wave');
const animation = document.querySelector('#moveTheWave');
const m = 0.512286623256592433;



function buildWave(w, h) {
  
  const a = h / 4;
  const y = h / 2;
  
  const pathData = [
    '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
  ].join(' ');
  
  path.setAttribute('d', pathData);
  
var stroke = document.getElementById("wave");
stroke.setAttribute("stroke", "#000");
}

buildWave(180, 120);

html, body { 
  height: 100%;
  margin: 0;
  width: 100%;
}

body { 
  align-items: center; 
  display: flex; 
}

div {
  align-items: center;
  display: flex;
  height: 220px;
  margin: 0 auto;
  width: 100%;
}

svg { 
  margin: 0 auto; 
  overflow: hidden;
}

#wave {
  stroke-dasharray: 0 32 202 32;
  animation: moveTheWave 4800ms linear infinite;
}

@keyframes moveTheWave {
  0% { 
    stroke-dashoffset: 0; 
    transform: translate3d(0, 0, 0);
  }
  100% {
    stroke-dashoffset: -266;
    transform: translate3d(-180px, 0, 0);
  }
}

<div>
  <svg xmlns="http://www.w3.org/2000/svg" 
     width="640px" height="480px"
     viewBox="5 0 160 120">
    <path id="wave" 
        fill="none" 
        stroke-width="4"
        stroke-linecap="round">
    </path>
  </svg>
</div>

我尝试使用关键帧（CSS）更改颜色的笔触，但它是时间渐变而不是方向渐变。

Azyme