SVG描边动画靠stroke、stroke-dasharray和stroke-dashoffset协同实现：stroke控制颜色并需显式声明transition，后两者通过虚线遮罩与偏移制造“绘制错觉”，且必须内联SVG才可被CSS控制。
SVG 颜色与描边动画不是靠“画笔移动”实现的，而是用 stroke + stroke-dasharray + stroke-dashoffset 三者协同完成——前者管颜色，后两者管“怎么露出来”。关键在于分清职责：颜色变化靠 stroke 过渡，绘制感靠虚线偏移动画，二者缺一不可。
描边颜色要动，必须显式加 transition
stroke 不像 color 那样默认可过渡，不写声明就是瞬变。哪怕只改一次颜色，也得在 CSS 中明确写：
-
path { transition: stroke 0.4s ease; }（推荐写全属性名，避免all带来意外） - 目标值必须是确定颜色格式：如
#3b82f6 → rgb(59, 130, 246)可行，currentcolor → red在旧 Safari 可能失效 - 用 CSS 变量控制时，确保变量被真正用于
stroke: var(--main-color)，且该元素上已声明transition
描边动画本质是“显隐”，不是“画线”
stroke-dasharray 和 stroke-dashoffset 共同制造“绘制错觉”：把整条路径当成长度为 L 的实线，再用虚线遮罩+位移让它逐步显现。
- 先用 JS 获取真实长度：
const L = pathEl.getTotalLength();（必须等 SVG 渲染完成，否则返回 0） - 设
stroke-dasharray: L;和stroke-dashoffset: L;—— 此时路径完全不可见 - 通过
@keyframes或transition把stroke-dashoffset减到0，路径就“画完”了 - 响应式缩放时，
getTotalLength()返回的是原始坐标系长度，视觉速度会变；若需精确，可用transform: scale()替代宽高缩放
颜色 + 动画叠加才像“带色描边”
单独做 stroke-dashoffset 动画只能看到线“冒出来”，要让颜色同步渐变，就得两件事一起动：
立即学习“前端免费学习笔记（深入）”；
- 用
@keyframes同时控制stroke-dashoffset和stroke，避免transition触发时机不一致导致“线画完了但颜色还没变” - 示例关键帧：
@keyframes draw-and-tint {<br> from { stroke-dashoffset: var(--len); stroke: #94a3b8; }<br> to { stroke-dashoffset: 0; stroke: #3b82f6; }<br>} - 路径含
fill时，记得加fill="none"，否则填充会盖住描边动画效果
内联 SVG 是前提，引入方式决定能否控制
只有直接写在 HTML 里的 SVG（内联 SVG）才能被 CSS 选中并修改 stroke 或 fill；用 <img src="icon.svg"> 引入的 SVG 完全隔离，CSS 对它无效。
- 行内属性如
<path stroke="black">优先级高于 CSS，需用!important或改用currentColor绕过 - 推荐统一用
fill: currentColor; stroke: currentColor;，父容器设color即可批量换色 - AI 或 Figma 导出的 SVG 常带冗余
fill="none"或命名色（如red），建议用 SVGO 压缩并转成十六进制，便于维护
