stroke-dasharray 动画本质是描边显隐动而非颜色动，需配合 stroke 过渡实现颜色变化；路径长度须匹配 getTotalLength()，响应式缩放和 Safari 兼容性是关键难点。
stroke-dasharray 动画本质不是“描边颜色动”，而是“描边显隐动”
很多人想用 stroke-dasharray 实现描边颜色渐变或流动效果，结果发现颜色根本没变——因为 stroke-dasharray 只控制路径的“显示长度+间隔”，不参与颜色计算。它配合 stroke-dashoffset 能做出“描边从无到有”的动画，但颜色过渡得靠别的路子。
真正能触发颜色动画的，只有 stroke 属性本身的 CSS 过渡或动画。所以常见做法是：先用 stroke-dasharray 做出“描边绘制感”，再单独给 stroke 加颜色过渡，两者叠加才像“带颜色的描边动画”。
-
stroke-dasharray的值必须匹配路径总长（可用 JS 的getTotalLength()获取），否则动画会错位或卡顿 - 若 SVG 是响应式缩放的，
getTotalLength()返回的是原始坐标系长度，缩放后视觉长度会变，但 dash 动画仍按原始长度跑——容易看起来“太快”或“没走完” - 直接在 SVG 元素上写
style="transition: stroke 0.3s"是可行的，但注意浏览器对stroke的过渡支持度：Chrome/Firefox/Edge 都行，Safari 15.4+ 才稳定支持stroke的 color 过渡
CSS 中 stroke 颜色过渡要加 transition，且不能依赖 fill 或 opacity 替代
stroke 不像 color 或 background-color 那样默认可过渡，必须显式声明 transition: stroke 0.4s ease，否则改 stroke 值就是瞬变。
别想着用 fill 混淆替代——描边和填充是两个独立属性；也别指望改 opacity 来模拟颜色变化，它只会让整个描边变淡，不是色相/饱和度/亮度的渐变。
立即学习“前端免费学习笔记（深入）”；
- 过渡目标必须是具体颜色值：
#3b82f6→hsl(120, 100%, 50%)可以，但currentcolor→red在部分旧 Safari 中会 fallback 为瞬变 - 如果用 CSS 自定义属性控制颜色（如
--stroke-color: #ef4444），记得在 :root 或元素上声明transition: stroke 0.3s，且确保该变量确实被用于stroke: var(--stroke-color) - 动画中同时改
stroke-dashoffset和stroke，建议用@keyframes统一管理，避免 transition 触发时机不一致导致“颜色变了但线还没画完”
SVG 路径太复杂时，getTotalLength() 返回值不准怎么办
某些 SVG 编辑器导出的路径含冗余贝塞尔控制点、过小弧段或非标准命令（比如 a 弧指令参数异常），会导致 getTotalLength() 返回 0 或远小于预期的值，stroke-dasharray 动画就完全失效。
这不是代码写错了，是路径数据本身有问题。解决思路不是硬调参数，而是预处理路径。
- 用在线工具（如 SVGOMG）优化 SVG，勾选 “Remove invisible paths” 和 “Convert path data to relative” —— 很多时候能修复
getTotalLength()返回异常 - JS 中检测：执行
pathEl.getTotalLength() === 0后，可 fallback 到手动估算长度（如取pathEl.getAttribute('d')粗略解析关键点距离），但仅作保底，不推荐长期依赖 - 若路径由 D3 或其他库动态生成，确保调用
getTotalLength()时 SVG 已插入 DOM 且未被 display:none 隐藏（隐藏状态下部分浏览器返回 0）
用 @keyframes 同时驱动 dashoffset 和 stroke 更可控
混合动画用 transition 容易不同步，尤其当 hover 触发多次、或父容器重排时。用 @keyframes 显式定义每一步，节奏更稳。
svg path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: draw 1.2s ease-in-out forwards;
}
@keyframes draw {
0% {
stroke-dashoffset: 100;
stroke: #6366f1;
}
50% {
stroke-dashoffset: 0;
stroke: #8b5cf6;
}
100% {
stroke-dashoffset: -100;
stroke: #a855f7;
}
}
-
stroke-dashoffset从正到负，才能实现“画完继续擦出一点”的流畅收尾；只设到 0 容易显得生硬 - 关键帧里
stroke的颜色变化点最好和dashoffset的转折点对齐（比如都在 50%），否则人眼会察觉“颜色跳了但线没动” - 动画结束后加
forwards，否则stroke会回退到初始值，而dashoffset不会——这会造成颜色和描边状态不一致
