stroke与fill共存时描边覆盖填充导致fill不生效，根本原因是描边未彻底清除（需stroke:none而非transparent），且fill必须在描边动画末帧同步启用并显式声明于path标签中。
为什么 stroke-dashoffset 动画后 fill 不生效
常见现象是：描边动画跑完了，文字或图标看着“画完了”，但内部仍是透明的，fill 像被盖住了一样没显示出来。根本原因是 stroke 和 fill 共存时，描边会压在填充上层——哪怕描边颜色设为 transparent，只要它还存在，就会干扰渲染层级。
必须让描边在填充生效前彻底“消失”，而不是“变透明”。stroke: none 是唯一可靠的方式，stroke-opacity: 0 或 stroke: transparent 都不能保证填充穿透。
- SVG 路径上不能写
stroke="white"这类内联属性，否则会覆盖 CSS 中的stroke: none -
fill="none"必须显式写在 HTML 的<path></path>标签里，不能只靠 CSS 设置 - 动画中
fill不能提前出现（比如 0% 就设fill: white），否则会和描边打架
如何用单个 @keyframes 控制描边收尾 + 填充入场
把描边绘制、描边清除、填充启用三个动作锁进同一个动画，避免多动画异步导致的时序错乱。关键节点不是“50% 描边完成”，而是“80% 描边还在，100% 描边已清空、填充已就位”。
示例 CSS：
@keyframes line-anim {
0% {
stroke-dashoffset: 100%;
stroke: white;
fill: transparent;
}
80% {
stroke-dashoffset: 0;
stroke: white;
fill: transparent;
}
100% {
stroke-dashoffset: 0;
stroke: none;
fill: white;
}
}
-
stroke-dasharray值建议用百分比（如100%）而非像素值，适配响应式缩放 - 每个
<path></path>需单独设置stroke-dasharray和stroke-dashoffset初始值，不能共用同一套数值 - 动画必须加
forwards，否则末帧样式不会保留
为什么不能用 -webkit-text-stroke 实现这个效果
-webkit-text-stroke 是纯 CSS 文本描边，它和 SVG 的 stroke 渲染机制完全不同：前者没有路径概念，无法用 stroke-dashoffset 做逐段绘制；后者是矢量路径，可精确控制起止点与偏移。
想对文字做“先描边再填实”的动画，-webkit-text-stroke 只能整体开关，没法模拟“一笔一划画出来”的过程。强行用 text-shadow 多层叠加模拟描边，更做不到路径级的 dash 控制。
-
-webkit-text-stroke在 Firefox 中支持极差，text-stroke-color单独设置还有 bug - 它不支持
stroke-linecap、stroke-dasharray等 SVG 描边核心属性 - 即使加上
color: transparent，也无法实现“描边消失→填充浮现”的视觉切换逻辑
容易被忽略的 SVG 结构细节
很多失败案例其实卡在 HTML 层面：路径标签写法不对，CSS 选择器没命中，或者父容器干扰了渲染。
-
<path></path>必须带fill="none"，且不能有stroke=内联属性 - CSS 中统一控制描边样式，例如
#logo path { stroke: white; stroke-width: 8; fill: none; } - 确保 SVG 根元素没有
viewBox缩放异常，否则stroke-dasharray计算会失准 - 如果图标来自字体图标（如 iconfont），得先转成 path 才能用此方案；直接用
<i></i>标签不行
最常漏掉的一点：动画延迟链（animation-delay）必须和每个 path 的 stroke-dasharray 长度匹配，否则有的字母画一半就切到填充态了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
