Javascript 动画每页只加载一次

Question

我有一个 SVG，动画波浪线。我希望这些波浪线在某个页面上出现多次。但是，似乎只有第一个实例显示而其他实例不显示...我知道这一点，因为如果我在检查器中删除第一个实例，则会显示下一个实例。

这是我的代码:

let xs = []
for (var i = 0; i <= 200; i++) {
  xs.push(i)
}

let t = 0

function animatewavy() {
  
  let points = xs.map(x => {
    
    let y = 10 + 2 * Math.sin((x + t) / 5)
    
    return [x, y]
  })
  
  let path = "M" + points.map(p => {
    return p[0] + "," + p[1]
  }).join(" L")
  
  document.querySelector("path").setAttribute("d", path)
  
  t += 0.8
  
  requestAnimationFrame(animatewavy)
}

animatewavy()

.wavy-line {
  margin:35px auto;
  width:150px;
}

.wavy-line svg {
  height: 15px;
  width:150px;
}

.wavy-line path {
  stroke-width: 5px;
  fill: none;
}

.wavy-line .path-green { stroke: #56AE5F; }
.wavy-line .path-blue { stroke: #1FB5D1; }
.wavy-line .path-yellow { stroke: #F9B930; }

<div class="wavy-line"><svg><path class="path-blue"></path></svg></div>

<div class="wavy-line"><svg><path class="path-blue"></path></svg></div>

<div class="wavy-line"><svg><path class="path-blue"></path></svg></div>

<div class="wavy-line"><svg><path class="path-blue"></path></svg></div>

您会看到第一个出现，但其余的不会...我不确定我做错了什么，我是否需要以某种方式结束 javascript 并重新启动它？

如果有任何帮助，我将不胜感激:)

Answer 1

document.querySelector("path") 只返回第一个匹配项，这就是为什么只有第一个 svg 是动画的。

要同时为所有 svg 设置动画，请使用 document.querySelectorAll 将所有 path 节点作为数组获取并迭代它们以调用 setAttribute每个人都这样:

document.querySelectorAll("path").forEach(elem => elem.setAttribute("d", path))