屏幕缩放时，如何让pathIcon沿SVG路径跟随视口中心滚动？

问题背景 #

• 初始功能：pathIcon可沿SVG路径跟随屏幕中心滚动
• 第一阶段问题：用vw单位设置SVG宽高实现缩放后，窗口尺寸调整时，pathIcon仍沿旧路径滚动，未适配缩放后的新SVG路径，手动重新计算路径无效
• 第二阶段问题：参考方案解决路径适配问题后，新问题出现——滚动时pathIcon不再跟随视口（窗口）中心移动

排查方向 #

• 视口中心坐标计算逻辑：检查是否在SVG缩放后，仍用初始SVG尺寸的比例转换视口坐标，未同步使用当前SVG的实际缩放比例
• 路径长度更新时机：确认窗口resize事件中，是否仅更新了SVG路径的视觉表现，未重新计算并更新用于图标定位的路径总长度参数
• 滚动事件的位置绑定：排查滚动触发时，是否使用了缓存的旧SVG尺寸/路径数据，而非实时获取的最新值

解决办法 #

1. 同步视口坐标与SVG缩放比例
   在resize和滚动事件中，实时计算SVG的当前缩放比例，将视口中心的绝对坐标转换为SVG内部的相对坐标：

   const svg = document.getElementById('target-svg');
   // 存储SVG原始尺寸（初始化时获取）
   const originalWidth = Number(svg.getAttribute('width'));
   const originalHeight = Number(svg.getAttribute('height'));
   
   function getScaledViewportCenter() {
     const currentScaleX = svg.clientWidth / originalWidth;
     const currentScaleY = svg.clientHeight / originalHeight;
     // 转换视口中心到SVG内部坐标
     return {
       x: (window.innerWidth / 2) / currentScaleX,
       y: (window.innerHeight / 2) / currentScaleY
     };
   }
   

2. 实时更新路径总长度
   在窗口resize时重新获取路径的总长度，确保滚动计算时使用最新的路径数据：

   const path = document.getElementById('target-path');
   let pathTotalLength = path.getTotalLength();
   
   window.addEventListener('resize', () => {
     // 重新计算缩放后的路径总长度
     pathTotalLength = path.getTotalLength();
   });
   

3. 修正滚动事件的定位逻辑
   滚动时，基于最新的视口相对坐标和路径长度，重新计算图标在路径上的位置：

   const pathIcon = document.getElementById('path-icon');
   
   window.addEventListener('scroll', () => {
     const center = getScaledViewportCenter();
     // 这里根据实际逻辑，将视口中心映射为路径上的对应偏移量
     // 示例：根据滚动距离计算路径上的点
     const scrollOffset = window.scrollY;
     const pathOffset = (scrollOffset / document.body.scrollHeight) * pathTotalLength;
     const targetPoint = path.getPointAtLength(pathOffset);
     // 更新图标位置（需根据SVG的定位方式调整，比如是否需要加上SVG容器的偏移）
     pathIcon.style.left = `${targetPoint.x}px`;
     pathIcon.style.top = `${targetPoint.y}px`;
   });
   

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