不能直接用 transition 平滑切换两个不同结构的 的 d 属性，因为 d 是字符串而非数值型属性，浏览器不支持对其插值动画，css 过渡对此完全忽略；可用 stroke-dasharray + stroke-dashoffset 实现描边绘制动画，或借助 、gsap 等实现真正变形。
不能直接用 transition 平滑切换两个不同结构的 <path></path> 的 d 属性 —— 浏览器不支持对路径数据做插值动画。
为什么 d 属性加 transition 没反应
SVG 的 d 是字符串，不是数值型属性。即使你写了 transition: d 0.3s，浏览器也完全忽略，因为 CSS 过渡只对可计算中间值的数值属性（如 opacity、transform、stroke-dashoffset）生效。这不是写法问题，是规范限制。
- 常见误判：看到
<path></path>样式变了但没动画，第一反应是“过渡没写对”，其实是根本不可动画 - Chrome / Safari / Firefox 全部不支持
d过渡，连警告都不抛 - 用
getComputedStyle(el).d读不到值，也侧面印证它不在 CSS 属性体系内
真正能平滑变形的替代方案：用 stroke-dasharray + stroke-dashoffset
前提是两个 <path></path> 的总路径长度一致（或近似），且你目标是“描边绘制效果”而非形状几何变形。这是目前最轻量、兼容性最好、无需 JS 的方案。
- 先用
getTotalLength()获取路径长度，设为stroke-dasharray和初始stroke-dashoffset - 基础状态：
stroke-dashoffset= 总长 → 看不见描边 - 激活状态：
stroke-dashoffset= 0 → 完整显示 - 只需写
transition: stroke-dashoffset 0.4s ease-out，就能实现“画出来”的动画
<path d="M10 10 L90 10 L90 90 Z" stroke="#000" fill="none" stroke-width="2"></path>
→ 只能用于单路径描边动画，不能让三角形变成圆形。
想让 SVG 形状真正“变形”？得靠 <animate></animate> 或 JS 库
如果必须从矩形变圆形、星形变心形这类几何结构变化，CSS 无解。可行路径只有两条：
- 用 SVG 原生
<animate attributename="d" ...></animate>，但需手写关键帧路径字符串，且各浏览器对复杂路径插值支持不一（Safari 尤其保守） - 用 GSAP 或 anime.js 驱动
d属性，它们内部做了贝塞尔曲线插值或分段逼近，比原生可靠得多 - 极简 hack：用两个重叠
<path></path>，分别控制opacity和transform模拟变形感（例如缩放+淡出旧路径、淡入+位移新路径），但不是真变形
容易被忽略的渲染细节
即使你用 stroke-dashoffset 实现了“画线”动画，也可能在 Safari 上看到锯齿或闪烁 —— 这不是过渡失效，而是 SVG 渲染层未启用合成。
- 加
transform: translateZ(0)或will-change: stroke-dashoffset强制 GPU 加速（仅对描边动画有效） - 确保
<path></path>没有filter或模糊阴影，这些会打断合成层 - 路径太细（
stroke-width ）时，部分设备会关闭抗锯齿，动画中易出现跳变点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
