当前位置：首页 > 文章列表 > 文章 > 前端 > SVG文字描边动画填充颜色技巧

SVG文字描边动画填充颜色技巧

2026-03-13 09:57:42 0浏览收藏

✅ 正确解法：融合描边完成与填充触发的单动画流程

原代码中将 fill 单独抽离为独立 @keyframes fill，并用 3.5s 延迟启动，存在两大隐患：

时机不可靠：各字母动画时长、延迟不同（0–2.1s），3.5s 是粗略估算，易早于最晚字母完成；
属性冲突：#logo path 默认无 fill 声明，且 stroke 优先级高，单纯设置 fill: white 不会覆盖描边视觉，需确保 stroke 消失或路径进入“可填充态”。

推荐采用 单动画多阶段控制 方案，在 line-anim 中内嵌填充逻辑：

@keyframes line-anim {
  0% {
    stroke-dashoffset: 100%; /* 初始完全隐藏 */
    fill: transparent;        /* 确保初始无填充干扰 */
  }
  50% {
    stroke-dashoffset: 0;    /* 描边绘制完成 */
    stroke: white;           /* 保持描边为白色（可选） */
  }
  100% {
    stroke-dashoffset: 0;
    stroke: none;            /* 关键！清除描边，让填充可见 */
    fill: white;             /* 此时填充真正生效 */
  }
}

同时，需在 SVG 路径上显式声明 fill="none" 并移除冗余 stroke 样式，避免内联属性覆盖 CSS：

并在 CSS 中统一设置基础描边样式：

#logo path {
  stroke: white;
  stroke-width: 10;
  fill: none; /* 确保初始无填充 */
  stroke-linecap: round;
  stroke-linejoin: round;
}

? 完整修复步骤清单

清理 SVG 内联样式：删除所有标签中的 stroke="..." 和 fill="..." 属性，仅保留 fill="none"（确保安全起点）；

统一 CSS 基础样式：

#logo path {
  fill: none;
  stroke: white;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}

重写动画关键帧（核心修复）：

@keyframes line-anim {
  0% {
    stroke-dashoffset: 100%;
    fill: transparent;
  }
  50% {
    stroke-dashoffset: 0;
    stroke: white;
  }
  100% {
    stroke-dashoffset: 0;
    stroke: none;  /* 必须清空描边 */
    fill: white;    /* 填充生效 */
  }
}

动态计算 stroke-dasharray（提升鲁棒性）：
原代码中手动写死 571、463 等值易出错。建议用 JS 自动获取并注入：

document.querySelectorAll('#logo path').forEach((path, i) => {
  const length = path.getTotalLength();
  path.style.strokeDasharray = length;
  path.style.strokeDashoffset = length;
  // 添加动画（带延迟）
  path.style.animation = `line-anim 2s ease forwards ${i * 0.3}s`;
});