stroke-dashoffset 是实现发光线条动画的关键参数，它通过控制虚线起始点偏移配合 stroke-dasharray，在路径上制造光斑滑动效果；需用 JS 获取路径真实长度以精准设置参数，并结合 filter 发光与 GPU 加速保障性能。
直接用 stroke-dashoffset 做发光线条动画，核心不是“加光”，而是控制虚线段在路径上的滑动位置——真正的发光感来自高对比色、模糊阴影和循环偏移的配合。纯靠 stroke-dashoffset 动画本身不发光，但它是实现“光效游走”最轻量、最可控的起点。
为什么 stroke-dashoffset 是关键参数
stroke-dashoffset 决定了虚线图案的起始绘制点。当它随动画变化时，视觉上就像一段亮色“光斑”沿着路径匀速滑动。它必须和 stroke-dasharray 配合使用，否则偏移无效。
-
stroke-dasharray设为单值（如200）时，等效于200, 200：一段实线 + 一段等长空白，循环出现 - 若路径总长是
1000px，stroke-dasharray: 200就会生成 5 段重复单元；动画中stroke-dashoffset从0变到-1000，刚好让光斑完整跑完一圈 - 偏移方向：正值向路径起点方向移动（常用于“从右往左”效果），负值向终点方向（更符合直觉的“前进”）
必须先获取路径真实长度
硬写 stroke-dasharray 和 stroke-dashoffset 数值大概率错位或断续。SVG 路径长度不能靠目测，得用 JS 获取：
const path = document.querySelector('path');
const length = path.getTotalLength(); // 返回精确像素值，如 842.67
拿到这个值后，再设 stroke-dasharray 为该长度（或略大），stroke-dashoffset 初始值设为相同数值，才能确保初始状态“完全隐藏”，动画开始后才逐段显现。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：直接写死
stroke-dasharray: 100，结果路径实际长 320px，动画只跑三分之一就重头开始 - 兼容性注意：IE 不支持
getTotalLength()，需 fallback 或放弃支持 - 响应式场景下，如果 SVG 宽度缩放，路径长度会变，需监听 resize 并重新计算
发光感靠 box-shadow + 颜色叠加，不是 stroke 本身
stroke 只负责线条本体，要“发光”，得加多层 box-shadow 或 filter: blur()。单纯调高 stroke 的 opacity 或 color 明度，效果单薄且易糊成一团。
- 推荐组合：
stroke: #00f+filter: drop-shadow(0 0 4px #0af) drop-shadow(0 0 8px #00f) - 避免用
text-shadow类思路套用在 path 上——它对 SVG 元素无效，必须用filter或外层容器的box-shadow - 动画期间别同时 animate
filter，性能开销大；优先 animatestroke-dashoffset，发光样式保持静态
动画循环与性能细节
一个看似简单的 @keyframes 动画，容易因 timing-function 或 duration 设置不当导致卡顿或跳帧。
- duration 建议 ≥ 2s，太短会显得急促；用
linear最稳，cubic-bezier(.4,0,.6,1)可微调节奏但非必需 - 务必加
transform: translateZ(0)或will-change: stroke-dashoffset触发 GPU 加速，尤其在移动端 - 多个发光线条同时动画时，避免共用同一
@keyframes名称——浏览器可能复用缓存导致同步异常，每个应独立命名如move-line-1、move-line-2
真正难的不是写对那几行 CSS，而是路径长度动态适配、发光层次叠加、以及多条线之间的节奏错位——这些细节不处理好，动画就只是“动了”，而不是“活了”。
