SVG d 属性不能直接用 transition 动画
浏览器不支持对 d 这种字符串型路径数据做插值过渡，哪怕你写了 transition: d 0.3s，也完全没反应——它会被静默忽略。CSS 动画引擎只认数值型属性（比如 opacity、transform、stroke-width），而 d 是 SVGPathData，本质是命令序列，不是数字。
实操建议：
- 改用
transform+path的transform属性做位移/缩放级变形（有限但可靠） - 需要真正“形状变化”时，必须走 JavaScript 路线：用
anime.js、GSAP或原生requestAnimationFrame手动插值两个d字符串 - 若只是起点/终点固定、中间形态可控，可提前定义好几组
d值，用keyframes+@keyframes配合animation（但仍是离散帧，非平滑插值）
用 stroke-dasharray + stroke-dashoffset 模拟描边动画
这是最常用、兼容性最好、且 CSS 原生支持的“伪路径动画”方案，适用于线条绘制、路径浮现等场景。它不改变 d，而是通过控制虚线长度和偏移量制造运动错觉。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 先用
getTotalLength()获取路径真实长度，设为stroke-dasharray和初始stroke-dashoffset - 把
stroke-dashoffset从全长变为0，就能实现“从无到有”的绘制效果 - 必须显式设置
stroke和fill: none，否则看不到描边变化 - IE 不支持
getTotalLength()，需降级 fallback 或用 polyfill
示例：
path {
stroke: #333;
fill: none;
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 0.5s ease;
}
path.drawn {
stroke-dashoffset: 0;
}
stroke 颜色或宽度变化能用 transition，但要注意渲染行为
stroke、stroke-width、opacity 这些都是标准可过渡属性，写上 transition 就生效。但实际表现常有偏差：
-
stroke变色在部分 Safari 版本中会闪烁，建议用stroke-opacity配合固定色替代 -
stroke-width过渡时，路径锚点位置不变，但视觉上“变粗”可能造成边缘抖动，尤其在小尺寸 SVG 中明显 - 如果路径带
vector-effect: non-scaling-stroke，stroke-width过渡仍有效，但缩放时粗细不变，需确认设计意图是否匹配 - 多个
stroke相关属性同时过渡（如颜色+宽度），建议统一写进一个transition声明，避免触发多次重排
真正要平滑变形路径？只能靠 JS 插值 d 字符串
没有绕过这个限制的纯 CSS 方案。所谓“平滑”，是指两个不同结构的 d（比如 M0,0 L100,100 → M0,0 Q50,0 100,100）之间逐帧生成中间路径数据。这要求解析命令、对齐参数、线性插值坐标。
实操建议：
- 用
path-data-polyfill或svg-path-interpolation库处理基础插值逻辑 - 避免在每帧都调用
setAttribute('d', ...)，应批量计算后一次性更新，减少 layout thrashing - 注意贝塞尔控制点数量不一致时（如 C→Q），需做归一化处理，否则插值结果扭曲
- 移动端低端设备上，高频
requestAnimationFrame更新d容易掉帧，建议加节流或降帧率
复杂点不在怎么写，而在怎么让两段语义不同的路径“对齐参数”。比如一个含 3 个 C 命令，另一个只有 1 个 L，强行插值只会得到不可控的乱线——这事没法交给 CSS。
