心电图动画核心是用stroke-dasharray与stroke-dashoffset配合@keyframes实现匀速“绘制感”，需路径首尾y值一致、stroke-dashoffset从全长线性变至0再瞬回，用steps(1,end)避免循环跳变，且必须用getTotalLength()获取真实长度。
心电图动画的核心是路径描边 + 关键帧位移
纯 CSS 实现“绘制感”心电图，不能靠逐点画线，得用 stroke-dasharray 和 stroke-dashoffset 配合 @keyframes 控制描边起点偏移。关键在于：先用 SVG 定义一条平滑但带典型波峰（P-QRS-T）的心电图路径，再用 CSS 让这条线“从左到右逐步显现”，最后循环时让视觉上无缝衔接——这要求路径首尾 y 值严格一致，且动画时长与位移量匹配。
- 路径必须是单条
<path></path>，不能分段或用多个<polyline></polyline>，否则描边控制失效 -
stroke-dasharray值需等于路径总长度（可用 JS 的getTotalLength()获取，或导出 SVG 后查path.getTotalLength()），例如stroke-dasharray="420" -
stroke-dashoffset从420动画到0，实现“从无到有”的绘制；若要循环“无限绘制”，需在末尾瞬间跳回420，靠steps(1, end)或关键帧精确控制 - 避免用
ease缓动——心电图需要匀速绘制感，linear是唯一合理选择
SVG 路径怎么写才像真实心电图
直接手写贝塞尔曲线太难，推荐用工具生成后精修。核心特征有三：小幅基线波动（模拟干扰）、陡峭的 R 波（主峰）、R 波后带缓降的 T 波。不要追求医学级精度，但需保证一个周期内起点和终点的 y 坐标完全相同（比如都落在 y=50），否则循环时会跳变。
一个可直接用的简化路径示例（宽 400px，高 100px，基线 y=50）：
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
<path d="M0,50
C40,48 60,45 80,48
C100,52 110,65 120,50
C130,35 140,20 150,30
C160,40 170,48 180,50
C190,52 200,55 210,50
C220,45 230,40 240,45
C250,50 260,52 270,50
C280,48 290,47 300,48
C310,49 320,50 330,50
C340,50 350,50 360,50
C370,50 380,50 390,50
L400,50"
fill="none"
stroke="#2563eb"
stroke-width="2"
stroke-linecap="round"/>
</svg>
注意：末尾用 L400,50 强制落回基线，确保循环不跳。
立即学习“前端免费学习笔记（深入）”；
CSS 动画参数怎么配才不卡顿不闪跳
常见错误是设了 animation: draw 3s infinite 就完事——结果循环处明显停顿或倒抽一口。根本原因是 stroke-dashoffset 从 0 瞬间跳回最大值时浏览器重绘不连贯。解法是把动画拆成两段：绘制 + 重置，用 steps(1, end) 锁住重置帧。
- 先用 JS 获取路径长度：
const len = path.getTotalLength();，假设为420 - CSS 中设：
stroke-dasharray: 420; stroke-dashoffset: 420; - @keyframes 必须包含 0% → 99.9% 绘制，100% 瞬间重置：
@keyframes draw {<br> 0% { stroke-dashoffset: 420; }<br> 99.9% { stroke-dashoffset: 0; }<br> 100% { stroke-dashoffset: 420; }<br>} - 动画声明加
animation-timing-function: linear，且animation-iteration-count: infinite
移动端 Safari 上动画掉帧怎么办
iOS Safari 对 SVG stroke-dashoffset 动画优化差，尤其路径复杂时易卡顿。实测有效方案只有两个：
- 降低路径复杂度：把原路径的贝塞尔控制点从 6 组压到 4 组以内，用
C指令少于 5 次，或改用Q（二次贝塞尔）替代部分C - 强制硬件加速：给 SVG 容器加
transform: translateZ(0)或will-change: transform，但注意别套在<path></path>上（无效），要套在<svg></svg>外层<div> <li>别用 <code>%单位做animation-duration—— 写死2.8s比3s更不易触发 Safari 的帧率抖动逻辑
真正麻烦的不是画出来，而是让每个周期结束时那 1px 的接缝看不见。多试两次 99.9% 和 99.95% 的临界值，比调颜色重要得多。
