需先调用 getTotalLength() 获取 SVG 路径渲染后的实际长度，再设置 stroke-dasharray 和 stroke-dashoffset 实现描边动画；必须确保路径已插入 DOM 且完成布局，避免在 DOM 未加载、use 元素或 d 属性非法时调用。
在 H5 页面中实现 SVG 路径的精准描边动画（如“画线”效果），关键一步是获取路径的总长度，即调用 getTotalLength() 方法。这个值用于设置 stroke-dasharray 和 stroke-dashoffset，从而控制动画起止位置。
确保 SVG 路径已渲染且可访问
该方法必须在路径元素已插入 DOM 且完成布局计算后调用，否则可能返回 0 或报错。常见踩坑点：
- 脚本执行过早（如在
<svg>标签前或 DOM 未加载完时） - 路径使用了未解析的引用（如
<use href="#myPath">），getTotalLength()不支持<use>元素，需直接操作原始<path> - 路径
d属性为空、非法或含变量（如 CSS 变量或 JS 拼接未完成）
正确调用 getTotalLength() 的写法
推荐在 DOMContentLoaded 或 SVGElement.onload 后获取，或使用 requestAnimationFrame 确保样式和布局就绪：
const path = document.querySelector('#myPath');
// ✅ 安全写法：等待渲染完成
if (path && path.getTotalLength) {
const len = path.getTotalLength();
// 用于设置 stroke-dasharray: `${len} ${len}`
// 以及动画中从 len → 0 的 stroke-dashoffset
}
配合 CSS 描边动画的关键设置
拿到总长度后，需同步配置 SVG 路径样式，才能让动画生效：
- 给
<path>设置stroke、stroke-width和fill="none" - 添加
style="stroke-dasharray: [len] [len]; stroke-dashoffset: [len];" - 用 CSS transition 或 @keyframes 动画
stroke-dashoffset从[len]到0
例如：
<path id="myPath" d="M10 10 L90 90" stroke="#333" stroke-width="2" fill="none" style="stroke-dasharray: 113.14 113.14; stroke-dashoffset: 113.14;"></path>
动态路径或响应式场景下的注意事项
若路径随屏幕缩放、viewBox 变更或 JS 动态生成（如 D3 绘图），getTotalLength() 返回的是当前渲染状态下的实际像素长度（已受 transform / scale 影响），无需手动换算。但要注意：
- 窗口 resize 后路径尺寸变化？需重新调用
getTotalLength()并重置动画 - 使用
viewBox+width/height缩放 SVG？getTotalLength()仍返回渲染后长度，可直接使用 - 路径含
transform属性？不影响结果；但含scale()的<g>包裹？会影响——建议避免在父级做非均匀缩放
