多SVG实例滚动路径绘制优化：提速与提前触发方案咨询

针对你提出的两个优化需求，结合原代码存在的问题，以下是具体的修改方案：

核心问题分析 #

原代码使用全局滚动百分比控制所有路径绘制，无法适配不同位置SVG的绘制时机；同时直接通过setAttribute修改stroke-dasharray无法触发CSS过渡，且滚动事件触发过于频繁导致性能浪费。

优化实现代码 #

1. 添加CSS过渡样式 #

.path {
  /* 调整过渡时长控制绘制流畅度，0.1s为参考值 */
  transition: stroke-dasharray 0.1s ease;
}

2. 修改JavaScript逻辑 #

const paths = document.querySelectorAll(".path");
// 提前触发绘制的距离（单位：px，可根据需求调整）
const PRELOAD_OFFSET = 200;
// 绘制加速系数（大于1则绘制速度快于滚动速度）
const SPEED_UP_RATIO = 1.5;

// 初始化：存储路径长度，设置初始绘制状态
paths.forEach(path => {
  const pathLength = path.getTotalLength();
  // 把路径长度存在元素dataset中，避免重复计算
  path.dataset.length = pathLength;
  // 使用CSS变量控制虚线长度，确保过渡生效
  path.style.setProperty("--dash-length", 0);
  path.style.setProperty("--path-length", pathLength);
  path.style.strokeDasharray = "var(--dash-length) var(--path-length)";
});

// 节流滚动事件，避免频繁触发
let isTicking = false;
window.addEventListener("scroll", () => {
  if (!isTicking) {
    window.requestAnimationFrame(() => {
      updatePathDrawProgress();
      isTicking = false;
    });
    isTicking = true;
  }
});

// 初始化时执行一次，避免页面加载时无绘制状态
updatePathDrawProgress();

function updatePathDrawProgress() {
  const viewportHeight = window.innerHeight;

  paths.forEach(path => {
    const svg = path.closest("svg");
    const rect = svg.getBoundingClientRect();
    const elementTop = rect.top;
    const elementBottom = rect.bottom;

    // 计算绘制的触发范围：提前PRELOAD_OFFSET像素启动，延后PRELOAD_OFFSET像素完成
    const startTriggerPos = -PRELOAD_OFFSET;
    const endTriggerPos = viewportHeight + PRELOAD_OFFSET;
    const totalScrollRange = endTriggerPos - startTriggerPos;

    // 计算当前元素对应的绘制进度（0-1区间）
    let progress = (viewportHeight - elementTop) / totalScrollRange;
    progress = Math.max(0, Math.min(1, progress));

    // 应用加速系数，加快绘制速度
    const adjustedProgress = Math.min(1, progress * SPEED_UP_RATIO);

    const pathLength = parseFloat(path.dataset.length);
    const dashLength = adjustedProgress * pathLength;

    // 更新CSS变量触发过渡
    path.style.setProperty("--dash-length", dashLength);
  });
}

优化说明 #

1. 加快绘制速度

   • 通过SPEED_UP_RATIO系数控制绘制进度的增长速度，设置大于1的值即可让绘制速度快于滚动速度。
   • 使用requestAnimationFrame节流滚动事件，减少不必要的DOM操作，提升滚动流畅度。

2. 提前启动绘制

   • 基于每个SVG元素的视口位置计算触发范围，设置PRELOAD_OFFSET实现提前启动绘制、延后完成的效果，确保元素离开视口前绘制完成。

3. 修复CSS过渡无效问题

   • 改用CSS变量--dash-length控制虚线长度，通过style.setProperty修改变量值，配合CSS中的transition属性实现平滑过渡效果（直接修改DOM属性无法触发过渡）。

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