使SVG图形在进入窗口时播放(滚动)

<!-- HTML结构 -->
<div class="container">
  <svg class="svg-animation">
    <!-- SVG图形内容 -->
  </svg>
</div>

/* CSS样式 */
.container {
  height: 1000px; /* 设置容器高度，用于测试滚动效果 */
  overflow: auto; /* 显示滚动条 */
}

.svg-animation {
  opacity: 0; /* 初始时隐藏SVG图形 */
  transition: opacity 0.5s ease-in-out; /* 添加过渡效果 */
}

.play-animation {
  opacity: 1; /* 进入可视区域后显示SVG图形 */
}

// JavaScript代码
// 监听窗口滚动事件
window.addEventListener('scroll', function() {
  // 获取窗口滚动距离和可视区域高度
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var windowHeight = window.innerHeight || document.documentElement.clientHeight;
  
  // 获取SVG图形元素和容器元素
  var svgElement = document.querySelector('.svg-animation');
  var containerElement = document.querySelector('.container');
  
  // 计算SVG图形元素相对于窗口顶部的位置
  var svgTop = svgElement.getBoundingClientRect().top;
  
  // 判断SVG图形是否进入可视区域
  if (svgTop < windowHeight) {
    // 添加播放动画的CSS类
    svgElement.classList.add('play-animation');
  }
});