在JS中获取百分比基准SVG路径长度时遇到的问题

你遇到的核心问题在于：你误以为路径里的数值是百分比，但实际上SVG路径的d属性中，未指定单位的数值默认是用户单位，不是百分比。你的路径M 0,0 0,100 100,100 100,0 0,0在默认SVG用户坐标系里，就是一个边长为100用户单位的正方形，总长度自然是400（100×4），和实际屏幕尺寸完全无关。要实现适配所有设备的全屏路径绘制动画，得从SVG坐标系设置和路径动态生成两方面入手：

步骤1：正确配置全屏SVG #

先让SVG占满整个视口，同时明确坐标系映射关系：

<svg id="fullscreen-svg" width="100vw" height="100vh" viewBox="0 0 100 100" preserveAspectRatio="none">
  <path id="path" d="M 0,0 L 0,100 L 100,100 L 100,0 Z" fill="none" stroke="#333" stroke-width="2" />
</svg>

这里的viewBox="0 0 100 100"把SVG的用户空间固定为100×100的范围，配合width="100vw" height="100vh"，让这个范围完全适配屏幕尺寸。

步骤2：获取实际像素长度并配置动画 #

直接用getTotalLength()还是会返回400（用户单位长度），更稳妥的方式是动态生成基于SVG实际尺寸的路径，这样获取的长度就是真实屏幕像素值：

const svg = document.getElementById('fullscreen-svg');
const path = document.getElementById('path');

// 获取SVG当前的实际视口尺寸
const svgRect = svg.getBoundingClientRect();
const svgWidth = svgRect.width;
const svgHeight = svgRect.height;

// 更新路径为SVG的边界（完全贴合屏幕）
path.setAttribute('d', `M 0,0 L 0,${svgHeight} L ${svgWidth},${svgHeight} L ${svgWidth},0 Z`);

// 现在获取到的就是实际像素的路径总长度
const totalLength = path.getTotalLength();

// 设置描边动画的基础属性
path.style.strokeDasharray = totalLength;
path.style.strokeDashoffset = totalLength;

// 添加平滑绘制的过渡动画
path.style.transition = 'stroke-dashoffset 2s ease-in-out';
// 延迟触发动画避免初始渲染问题
setTimeout(() => {
  path.style.strokeDashoffset = '0';
}, 100);

为什么之前返回400？ #

默认情况下，SVG如果没设置viewBox，用户坐标系会和浏览器默认视口尺寸一致（通常是300×150），你的路径是100×100的正方形，总长度自然是400。而且SVG路径的d属性并不支持直接用百分比坐标（即便加%单位，处理起来也非常繁琐），所以必须通过动态生成路径或坐标系映射来实现全屏适配。

额外优化：响应窗口大小变化 #

如果用户调整窗口，路径需要重新适配，可监听resize事件保持动画一致性：

window.addEventListener('resize', () => {
  const svgRect = svg.getBoundingClientRect();
  const svgWidth = svgRect.width;
  const svgHeight = svgRect.height;
  
  // 记录当前动画进度
  const currentOffset = parseFloat(path.style.strokeDashoffset);
  const progress = (totalLength - currentOffset) / totalLength;
  
  // 更新路径和长度
  path.setAttribute('d', `M 0,0 L 0,${svgHeight} L ${svgWidth},${svgHeight} L ${svgWidth},0 Z`);
  const newTotalLength = path.getTotalLength();
  
  // 保持动画进度同步
  path.style.strokeDasharray = newTotalLength;
  path.style.strokeDashoffset = newTotalLength - (newTotalLength * progress);
  totalLength = newTotalLength;
});

这样就能实现完全适配所有设备的全屏路径平滑绘制动画了。

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