如何在滚动时为该SVG路径实现动画效果？

步骤1：调整SVG基础属性 #

先给目标路径添加描边动画所需的初始属性，后续通过JS动态控制这些属性实现滚动跟随效果：

<svg class="desktop-img" xmlns="http://www.w3.org/2000/svg" width="821.334" height="509.375" viewBox="0 0 821.334 509.375" preserveAspectRatio="true" version="1.1">
  <path id="Path_244" class="path" data-name="Path 244" 
        d="M-15596.515,315.963s-64.138,86.644-155.208,86.033-153.659-47.666-263.047-49.682-212.582,34.27-284.648,148.329-38.8,246.323-38.8,246.323" 
        transform="translate(16375.888 -274.001)" 
        fill="none" stroke="#ef404a" stroke-linecap="round" stroke-linejoin="round" stroke-width="60">
  </path>
</svg>

步骤2：编写滚动监听逻辑 #

通过JS获取路径实际长度，监听页面滚动进度，动态修改描边偏移量实现动画：

// 获取目标路径元素
const path = document.getElementById('Path_244');
// 获取路径的真实像素长度
const totalLength = path.getTotalLength();

// 初始化描边属性：让路径初始完全隐藏
path.style.strokeDasharray = totalLength;
path.style.strokeDashoffset = totalLength;

// 监听页面滚动事件
window.addEventListener('scroll', () => {
  // 计算滚动进度：已滚动距离 / 页面总可滚动距离
  const scrollProgress = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
  // 根据进度反向计算偏移量，让路径随滚动逐步显示
  const currentOffset = totalLength * (1 - scrollProgress);
  
  path.style.strokeDashoffset = currentOffset;
});

步骤3：可选平滑优化 #

给路径添加过渡样式，让动画更流畅：

.path {
  transition: stroke-dashoffset 0.1s ease-in-out;
}

核心原理说明 #

• getTotalLength()：获取SVG路径的实际长度，确保动画比例精准
• 滚动进度计算：通过已滚动距离与总可滚动距离的比值，得到0-1之间的进度值
• 描边偏移控制：stroke-dashoffset值越小，显示的路径越长，反向计算偏移量实现滚动时路径从无到有的绘制效果

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