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