如何实现点击SVG时切换动画暂停/播放状态

代码失效是四个核心错误导致的：

• JS获取元素时ID拼写错误：SVG的ID是wave，代码中错写为vawe，没有拿到目标DOM元素，点击事件完全没有绑定成功
• HTML内所有<path>标签重复使用了同一个IDLine_1，CSS中写的#Line_2到#Line_9选择器全部匹配不到元素，对应线条的动画规则根本没生效
• 动画是直接绑定在每个path线条上的，给父级SVG标签加animation-play-state: paused无法控制子元素的动画状态
• 缺失pulse动画的关键帧定义，动画本身没有可执行的变换规则

不需要单独遍历控制每一条线条，利用CSS后代选择器就可以通过父级类名批量控制所有线条的动画状态，修复后完整代码如下：

HTML结构 #

<div class="loader">
  <svg id="wave" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 38.05">
    <path id="Line_1" class="t" data-name="Line 1" d="M0.91,15L0.78,15A1,1,0,0,0,0,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H0.91Z"/>
    <path id="Line_2" class="t" data-name="Line 2" d="M6.91,9L6.78,9A1,1,0,0,0,6,10V28a1,1,0,1,0,2,0s0,0,0,0V10A1,1,0,0,0,7,9H6.91Z"/>
    <path id="Line_3" class="t" data-name="Line 3" d="M12.91,0L12.78,0A1,1,0,0,0,12,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H12.91Z"/>
    <path id="Line_4" class="t" data-name="Line 4" d="M18.91,10l-0.12,0A1,1,0,0,0,18,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H18.91Z"/>
    <path id="Line_5" class="t" data-name="Line 5" d="M24.91,15l-0.12,0A1,1,0,0,0,24,16v6a1,1,0,0,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H24.91Z"/>
    <path id="Line_6" class="t" data-name="Line 6" d="M30.91,10l-0.12,0A1,1,0,0,0,30,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H30.91Z"/>
    <path id="Line_7" class="t" data-name="Line 7" d="M36.91,0L36.78,0A1,1,0,0,0,36,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H36.91Z"/>
    <path id="Line_8" class="t" data-name="Line 8" d="M42.91,9L42.78,9A1,1,0,0,0,42,10V28a1,1,0,1,0,2,0s0,0,0,0V10a1,1,0,0,0-1-1H42.91Z"/>
    <path id="Line_9" class="t" data-name="Line 9" d="M48.91,15l-0.12,0A1,1,0,0,0,48,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H48.91Z"/>
  </svg>
</div>

CSS样式 #

.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 演示用高度，可根据实际业务场景修改 */
}
#wave {
  height: 70px;
  width: 70px;
  fill: black;
  cursor: pointer; /* 增加手型提示元素可点击 */
}
/* 当SVG有stop类时，所有线条动画暂停 */
#wave.stop .t {
  animation-play-state: paused;
}
/* 波形动画核心帧 */
@keyframes pulse {
  0%, 100% {
    transform: scaleY(0.4);
  }
  50% {
    transform: scaleY(1);
  }
}
/* 所有线条公共动画属性 */
.t {
  transform-origin: center;
  animation: pulse 1s infinite;
}
/* 单独设置每条线的动画延迟，模拟错落波形效果 */
#Line_1 {
  animation-delay: 0.15s;
}
#Line_2 {
  animation-delay: 0.3s;
}
#Line_3 {
  animation-delay: 0.45s;
}
#Line_4 {
  animation-delay: 0.6s;
}
#Line_5 {
  animation-delay: 0.75s;
}
#Line_6 {
  animation-delay: 0.9s;
}
#Line_7 {
  animation-delay: 1.05s;
}
#Line_8 {
  animation-delay: 1.2s;
}
#Line_9 {
  animation-delay: 1.35s;
}

JavaScript逻辑 #

// 修正ID拼写错误
const wave = document.getElementById("wave")
wave.addEventListener('click',function() {
  wave.classList.toggle('stop');
})

修复后点击SVG即可暂停所有线条动画，再次点击恢复播放，完全匹配音乐播放/暂停的状态切换需求。

内容的提问来源于stack exchange，提问作者samgear