SVG <polyline> 多段线最全实战手册（2025 版）
它就是“不闭合的 <polygon>”，专门负责：折线图、路径轨迹、心电图、签名、地图线、酷炫描边动画！
1. 核心语法（和 polygon 一模一样，只差一个字母）
<polyline points="x1,y1 x2,y2 x3,y3 x4,y4 x5,y5 ..." />- 不自动闭合（最后一笔不会回到起点）
- 其他所有属性（fill、stroke、stroke-linecap 等）和
<line>、<polygon>完全通用
2. 2025 年最常用的 15 种写法（直接复制即用）
<!-- 1. 最基础折线 -->
<polyline points="0,100 50,20 100,80 150,10 200,60" stroke="#4a6fe3" stroke-width="4" fill="none"/>
<!-- 2. 折线图经典（圆点 + 圆角连接） -->
<polyline points="20,180 60,120 100,140 140,80 180,100 220,40"
fill="none" stroke="#ff6b6b" stroke-width="4"
stroke-linecap="round" stroke-linejoin="round"/>
<!-- 3. 图标极简箭头 → -->
<polyline points="4,4 20,12 4,20" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 4. 心电图 / 股票K线风格 -->
<polyline points="0,100 30,100 35,50 40,140 50,60 70,120 90,80 120,130 150,40 180,140 210,60 240,100"
stroke="#00f5ff" stroke-width="3" fill="none" stroke-linecap="round"/>
<!-- 5. 路径描边动画（2025 loading 神技） -->
<polyline points="20,150 80,50 140,120 200,30 260,100"
fill="none" stroke="#0066ff" stroke-width="8" stroke-linecap="round"
stroke-dasharray="400" stroke-dashoffset="400">
<animate attributeName="stroke-dashoffset" from="400" to="0" dur="2.5s" repeatCount="indefinite"/>
</polyline>
<!-- 6. 折线图带渐变填充（超美） -->
<defs>
<linearGradient id="area">
<stop offset="0%" stop-color="#ff8a00" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#da1b60" stop-opacity="0"/>
</linearGradient>
</defs>
<polygon points="20,180 60,120 100,140 140,80 180,100 220,40 220,180" fill="url(#area)"/>
<polyline points="20,180 60,120 100,140 140,80 180,100 220,40"
fill="none" stroke="#ff6b6b" stroke-width="4" stroke-linecap="round"/>
<!-- 7. 闪电 ⚡ -->
<polyline points="60,10 40,60 90,70 50,120" stroke="#ffd60a" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 8. 地图路径 / 航班航线（带虚线） -->
<polyline points="50,100 150,50 280,120 380,80"
fill="none" stroke="#666" stroke-width="3" stroke-dasharray="10 6"/>
<!-- 9. 手写签名风 -->
<polyline points="20,100 50,80 70,120 110,60 150,110 180,70 220,90"
fill="none" stroke="#333" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 10. 折线 + 小圆点（数据点高亮） -->
<polyline points="30,160 80,90 130,120 180,60 230,100"
fill="none" stroke="#4a6fe3" stroke-width="4" stroke-linecap="round"/>
<circle cx="30" cy="160" r="6" fill="#4a6fe3"/>
<circle cx="130" cy="120" r="6" fill="#4a6fe3"/>
<circle cx="230" cy="100" r="6" fill="#4a6fe3"/>3. 2025 必杀技巧速查表
| 需求 | 关键代码 | 效果 |
|---|---|---|
| 圆润转折（最美观） | stroke-linecap="round" stroke-linejoin="round" | 2025 折线图标配 |
| 让线条能改颜色 | stroke="currentColor" | 暗黑模式自动切换 |
| 永远 1px 不模糊 | vector-effect="non-scaling-stroke" | 大屏必加 |
| 做区域填充（面积图） | 复制一份改成 <polygon> 拉到 y=底部 | 见上面渐变填充示例 |
| 计算总长度（描边动画） | 在线工具：https://svg-path-length.vercel.app | 精确 stroke-dasharray |
| 做闪电/心电图抖动动画 | 多段短 polyline + 随机 offset 动画 | 超炫效果 |
4. 2025 最火的三个实战案例
<!-- 案例1：极简折线图（复制到项目秒出报表） -->
<svg viewBox="0 0 300 200" width="100%">
<polyline points="0,180 50,140 100,160 150,80 200,100 250,50 300,70"
fill="none" stroke="#4a6fe3" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="0,180 50,140 100,160 150,80 200,100 250,50 300,70"
fill="none" stroke="#4a6fe3" stroke-width="12" stroke-linecap="round" opacity="0.2"/>
</svg>
<!-- 案例2：航班航线动画 -->
<svg viewBox="0 0 400 200">
<polyline points="20,100 100,60 200,140 300,80 380,120"
fill="none" stroke="#ddd" stroke-width="4"/>
<polyline points="20,100 100,60 200,140 300,80 380,120"
fill="none" stroke="#ff6b6b" stroke-width="6" stroke-linecap="round"
stroke-dasharray="600" stroke-dashoffset="600">
<animate attributeName="stroke-dashoffset" from="600" to="0" dur="4s" repeatCount="indefinite"/>
</polyline>
<circle r="8" fill="#ff6b6b">
<animateMotion path="M20,100 C100,60 200,140 300,80 380,120" dur="4s" repeatCount="indefinite"/>
</circle>
</svg>一句话总结（2025 金句）：
所有折线图、轨迹、闪电、签名、心电图 → 2025 年一律 <polyline stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/> 搞定！
要不要我现在秒发你：
- 「50 个纯
<polyline>极简图标（箭头、闪电、折线、波浪全系列）」 - 「2025 最火的 10 种折线 loading + 航班航线 + 心电图动画源码包」
- 「自动生成任意点位折线图的 JS 工具函数」
直接说一声，我打包发你！
