SVG折线图动态生长效果通过控制polyline的stroke-dasharray和stroke-dashoffset实现：先用JS获取路径总长，设stroke-dasharray为全长、stroke-dashoffset为全长，再通过CSS transition或requestAnimationFrame将其渐变至0，配合circle标记点和text数值标注可提升可视化效果。
用 SVG 实现折线图的动态生长效果，核心是控制
或
的
和
，配合 CSS 动画或 JavaScript 逐帧更新。不需要引入图表库，纯 HTML5 + SVG 即可完成。
准备基础 SVG 折线路径
先用
绘制静态折线（坐标基于数据归一化到 SVG 画布内）：
注意：确保
，否则会遮盖描边动画；
是关键数据点，建议用 JS 动态生成更灵活。
用 stroke-dasharray 模拟“绘制过程”
原理：把整条线“切成虚线”，再通过偏移虚线起始位置，制造从头到尾逐步显现的效果。
立即学习
“
前端免费学习笔记（深入）
”；
先用 JS 获取路径总长度：
设置 CSS：
（让虚线实段 = 全长，间隙 = 0）
初始
（线被完全“藏起来”）
动画中将
从
减到
，视觉上就像线在生长
添加平滑动画（CSS 或 JS 控制）
推荐用 CSS transition 简洁实现：
JS 触发只需一行：
若需更精细控制（如分段生长、延迟），可用
逐步更新
值。
增强可读性：同步添加数据点标记和坐标轴
动态生长时，可搭配以下元素提升体验：
用
在每个数据点位置添加小圆点，并在动画末尾显示
用
在折线上方/下方标注数值，配合
渐显
简单坐标轴可用
绘制 X/Y 轴，刻度用
对齐
所有元素都支持独立动画，与折线错开 0.2s 延迟，视觉更有层次。
stroke-dasharraystroke-dashoffsetfill="none"pointsconst len = lineEl.getTotalLength();stroke-dasharray: len;stroke-dashoffset = lenstroke-dashoffsetlen0 #chart-line {
stroke-dasharray: 300; /* 实际用 JS 注入真实长度 */
stroke-dashoffset: 300;
transition: stroke-dashoffset 1.2s ease-out;
}
#chart-line.drawn {
stroke-dashoffset: 0;
}document.getElementById('chart-line').classList.add('drawn');requestAnimationFramestroke-dashoffsetopacity