如何修复JavaScript实现的SVG路径滚动渐进绘制失效问题？

核心问题 #

1. 页面滚动范围不足：当前页面内容过少，滚动条几乎不存在，滚动百分比瞬间跳到接近1，触发strokeDasharray='none'，导致图形直接完整显示。
2. 滚动进度计算逻辑错误：基于整个页面的滚动进度计算绘制进度，而非SVG元素在视口中的可见进度，绘制时机完全错位。

修复步骤 #

1. 增加页面滚动空间 #

在CSS中设置页面最小高度，确保有足够的滚动范围：

body {
  min-height: 200vh; /* 让页面高度为视口的2倍，保证滚动条正常显示 */
  margin: 0;
  box-sizing: border-box;
}

svg {
  display: block;
  margin: 2rem auto;
  width: 80%; /* 调整SVG大小适配页面 */
}

2. 修正滚动进度计算逻辑 #

改为基于SVG元素在视口中的可见区域计算绘制进度，确保SVG从进入视口到完全离开的过程中逐步绘制：

var path = document.querySelector('#vectorPath');
var pathLength = path.getTotalLength();
var svg = document.querySelector('#vectorSvg');

// 初始化路径隐藏状态
path.style.strokeDasharray = pathLength;
path.style.strokeDashoffset = pathLength;

function updatePathDraw() {
  // 获取SVG的位置信息
  const svgRect = svg.getBoundingClientRect();
  // 计算SVG在视口中的可见进度：顶部进入视口开始，底部离开视口结束
  const scrollProgress = Math.max(0, Math.min(1, (window.innerHeight - svgRect.top) / (window.innerHeight + svgRect.height)));
  
  // 更新绘制长度
  path.style.strokeDashoffset = pathLength - (pathLength * scrollProgress);
  
  // 绘制完成后清除dash样式
  if (scrollProgress >= 1) {
    path.style.strokeDasharray = 'none';
  } else {
    path.style.strokeDasharray = pathLength;
  }
}

// 页面加载时初始化状态
updatePathDraw();
// 监听滚动和窗口 resize 事件
window.addEventListener('scroll', updatePathDraw);
window.addEventListener('resize', updatePathDraw);

3. 优化SVG线条绘制效果 #

添加线条端点和拐角的平滑设置，提升视觉体验：

<path id="vectorPath" d="M1359.5 99.5H99.5V668H1359.5V1251H99.5" stroke="black" stroke-width="198" stroke-linecap="round" stroke-linejoin="round" />

完整修复代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Svg Scroll</title>
    <style>
        body {
            min-height: 200vh;
            margin: 0;
            padding: 2rem;
            box-sizing: border-box;
        }
        h1 {
            text-align: center;
        }
        svg {
            display: block;
            margin: 2rem auto;
            width: 80%;
            max-width: 800px;
        }
    </style>
</head>
<body>
    <h1>Scroll down</h1>
    <svg id="vectorSvg" viewBox="0 0 1459 1350" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path id="vectorPath" d="M1359.5 99.5H99.5V668H1359.5V1251H99.5" stroke="black" stroke-width="198" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    <script>
        var path = document.querySelector('#vectorPath');
        var pathLength = path.getTotalLength();
        var svg = document.querySelector('#vectorSvg');

        path.style.strokeDasharray = pathLength;
        path.style.strokeDashoffset = pathLength;

        function updatePathDraw() {
            const svgRect = svg.getBoundingClientRect();
            const scrollProgress = Math.max(0, Math.min(1, (window.innerHeight - svgRect.top) / (window.innerHeight + svgRect.height)));
            
            path.style.strokeDashoffset = pathLength - (pathLength * scrollProgress);
            
            if (scrollProgress >= 1) {
                path.style.strokeDasharray = 'none';
            } else {
                path.style.strokeDasharray = pathLength;
            }
        }

        updatePathDraw();
        window.addEventListener('scroll', updatePathDraw);
        window.addEventListener('resize', updatePathDraw);
    </script>
</body>
</html>

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