复制SVG帧动画代码后无法运行，求解决方案

问题根源 #

原脚本存在两个核心问题，导致多容器动画失效：

1. 全局变量冲突：currentFrame是全局变量，多个容器会共享这个变量，帧切换逻辑混乱，无法独立控制每个容器的动画进度。
2. 全局选择器覆盖：document.querySelectorAll('.svg-container img.animated-svg')会选中页面上所有符合条件的SVG图片，切换时会同时操作所有容器内的图片，导致只有第一个容器的动画能正常运行，其他容器的状态被错误覆盖。

修复方案 #

修改脚本，让每个.svg-container容器独立管理自己的动画状态，实现多容器动画互不干扰：

完整修复代码 #

<style>
    /* 动画容器样式 */
    .svg-container {
      width: 7rem;
      height: 7rem;
      position: relative;
      overflow: hidden;
      display: inline-block; /* 可选：让多个容器并排显示 */
      margin: 0 1rem; /* 可选：添加容器间距 */
    }

    /* SVG图片基础样式 */
    .animated-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }

    /* 激活帧显示样式 */
    .animated-svg.active {
      opacity: 1;
    }
  </style>
</head>
<body>
  <!-- 第一个动画容器 -->
  <div class="svg-container">
    <img src="/wp-content/uploads/2023/07/Livestream_00001.svg" class="animated-svg active" />
    <img src="/wp-content/uploads/2023/07/Livestream_00002.svg" class="animated-svg" />
    <img src="/wp-content/uploads/2023/07/Livestream_00003.svg" class="animated-svg" />
    <!-- 剩余72个SVG图片... -->
  </div>

  <!-- 第二个动画容器 -->
  <div class="svg-container">
    <img src="/wp-content/uploads/2023/07/Livestream_00001.svg" class="animated-svg active" />
    <img src="/wp-content/uploads/2023/07/Livestream_00002.svg" class="animated-svg" />
    <img src="/wp-content/uploads/2023/07/Livestream_00003.svg" class="animated-svg" />
    <!-- 剩余72个SVG图片... -->
  </div>

  <script>
    // 获取页面上所有动画容器
    const svgContainers = document.querySelectorAll('.svg-container');

    svgContainers.forEach(container => {
      // 仅获取当前容器内的SVG图片，避免跨容器干扰
      const svgImages = container.querySelectorAll('img.animated-svg');
      // 每个容器独立维护当前帧状态
      let currentFrame = 0;

      // 当前容器专属的帧切换函数
      function showNextSvgImage() {
        svgImages.forEach(image => image.classList.remove('active'));
        currentFrame = (currentFrame + 1) % svgImages.length;
        svgImages[currentFrame].classList.add('active');
      }

      // 为每个容器启动独立的定时器
      setInterval(showNextSvgImage, 20);
    });
  </script>

关键修改点 #

• 容器独立处理：遍历每个.svg-container，为每个容器单独获取内部的SVG图片，避免全局选择器的跨容器干扰。
• 局部变量隔离：将currentFrame和帧切换函数放在容器遍历的闭包内，每个容器拥有独立的状态和逻辑，不会互相冲突。
• 独立定时器：每个容器启动自己的setInterval，确保各自的动画节奏不受其他容器影响。
• 简化触发逻辑：脚本放在body末尾，页面元素已加载完成，无需依赖DOMContentLoaded事件。

额外优化建议 #

• 预加载SVG资源：提前加载所有SVG图片，避免动画过程中出现加载延迟导致的卡顿。
• 内存管理：如果容器会动态添加或删除，记得在移除容器时清除对应的定时器，防止内存泄漏。

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