SVG 折线
<polyline> 元素用于绘制由多个点连接的线段，与多边形不同的是，折线不会自动封闭。
基本语法
html
<svg width="200" height="100">
<polyline points="10,90 50,10 90,60 130,30 170,70"
fill="none" stroke="#3b82f6" stroke-width="2"/>
</svg>主要属性
| 属性 | 描述 |
|---|---|
points | 定义各顶点坐标，格式：x1,y1 x2,y2 x3,y3... |
fill | 填充颜色（通常设为 none） |
stroke | 线条颜色 |
stroke-width | 线条宽度 |
stroke-linejoin | 线条连接处样式 |
stroke-linecap | 线条端点样式 |
折线 vs 多边形
<polyline>：开放图形，起点和终点不自动连接<polygon>：封闭图形，起点和终点自动连接
基础折线
html
<svg width="400" height="150">
<!-- 简单折线 -->
<polyline points="20,100 60,20 100,80 140,40 180,120 220,60 260,100"
fill="none" stroke="#3b82f6" stroke-width="3"/>
</svg>不同粗细的折线
html
<svg width="300" height="200">
<polyline points="20,30 60,10 100,40 140,20 180,50"
fill="none" stroke="#3b82f6" stroke-width="1"/>
<polyline points="20,80 60,60 100,90 140,70 180,100"
fill="none" stroke="#22c55e" stroke-width="3"/>
<polyline points="20,140 60,120 100,150 140,130 180,160"
fill="none" stroke="#ef4444" stroke-width="5"/>
</svg>线条连接样式 (stroke-linejoin)
html
<svg width="400" height="200">
<!-- miter（默认）：尖角 -->
<polyline points="20,80 60,20 100,80"
fill="none" stroke="#3b82f6" stroke-width="15" stroke-linejoin="miter"/>
<text x="60" y="110" text-anchor="middle" font-size="12">miter</text>
<!-- round：圆角 -->
<polyline points="140,80 180,20 220,80"
fill="none" stroke="#22c55e" stroke-width="15" stroke-linejoin="round"/>
<text x="180" y="110" text-anchor="middle" font-size="12">round</text>
<!-- bevel：斜角 -->
<polyline points="260,80 300,20 340,80"
fill="none" stroke="#ef4444" stroke-width="15" stroke-linejoin="bevel"/>
<text x="300" y="110" text-anchor="middle" font-size="12">bevel</text>
</svg>虚线折线
html
<svg width="300" height="150">
<!-- 短虚线 -->
<polyline points="20,30 80,10 140,50 200,20 260,60"
fill="none" stroke="#3b82f6" stroke-width="2" stroke-dasharray="5,3"/>
<!-- 长虚线 -->
<polyline points="20,80 80,60 140,100 200,70 260,110"
fill="none" stroke="#22c55e" stroke-width="2" stroke-dasharray="15,5"/>
<!-- 点线 -->
<polyline points="20,130 80,110 140,150 200,120 260,160"
fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="2,6"/>
</svg>填充折线
虽然通常不填充，但折线也可以有填充：
html
<svg width="300" height="150">
<!-- 填充折线会连接起点和终点形成区域 -->
<polyline points="20,120 60,20 100,80 140,40 180,100 220,60 260,120"
fill="#bfdbfe" stroke="#3b82f6" stroke-width="2"/>
</svg>使用 CSS 样式
html
<style>
.line-animated {
fill: none;
stroke: #3b82f6;
stroke-width: 3;
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: drawLine 3s ease forwards;
}
@keyframes drawLine {
to {
stroke-dashoffset: 0;
}
}
</style>
<svg width="300" height="100">
<polyline class="line-animated" points="20,80 80,20 140,60 200,30 260,70"/>
</svg>折线动画
html
<svg width="400" height="150">
<!-- 颜色变化 -->
<polyline points="20,80 60,20 100,60 140,40"
fill="none" stroke="#3b82f6" stroke-width="3">
<animate attributeName="stroke"
values="#3b82f6;#ef4444;#22c55e;#3b82f6"
dur="2s" repeatCount="indefinite"/>
</polyline>
<!-- 虚线流动 -->
<polyline points="180,80 220,20 260,60 300,40 340,80"
fill="none" stroke="#8b5cf6" stroke-width="3"
stroke-dasharray="10,5">
<animate attributeName="stroke-dashoffset"
from="0" to="30" dur="1s" repeatCount="indefinite"/>
</polyline>
</svg>实际应用示例
折线图
html
<svg width="350" height="200" viewBox="0 0 350 200">
<!-- 背景网格 -->
<line x1="50" y1="20" x2="50" y2="170" stroke="#e5e7eb" stroke-width="1"/>
<line x1="50" y1="170" x2="320" y2="170" stroke="#e5e7eb" stroke-width="1"/>
<!-- 水平网格线 -->
<line x1="50" y1="50" x2="320" y2="50" stroke="#f3f4f6" stroke-width="1"/>
<line x1="50" y1="90" x2="320" y2="90" stroke="#f3f4f6" stroke-width="1"/>
<line x1="50" y1="130" x2="320" y2="130" stroke="#f3f4f6" stroke-width="1"/>
<!-- 数据折线 -->
<polyline points="50,150 95,100 140,120 185,60 230,80 275,40 320,70"
fill="none" stroke="#3b82f6" stroke-width="3"/>
<!-- 数据点 -->
<circle cx="50" cy="150" r="5" fill="#3b82f6"/>
<circle cx="95" cy="100" r="5" fill="#3b82f6"/>
<circle cx="140" cy="120" r="5" fill="#3b82f6"/>
<circle cx="185" cy="60" r="5" fill="#3b82f6"/>
<circle cx="230" cy="80" r="5" fill="#3b82f6"/>
<circle cx="275" cy="40" r="5" fill="#3b82f6"/>
<circle cx="320" cy="70" r="5" fill="#3b82f6"/>
</svg>区域图
html
<svg width="350" height="200">
<!-- 填充区域 -->
<polyline points="50,170 50,150 95,100 140,120 185,60 230,80 275,40 320,70 320,170"
fill="#bfdbfe" stroke="none"/>
<!-- 折线 -->
<polyline points="50,150 95,100 140,120 185,60 230,80 275,40 320,70"
fill="none" stroke="#3b82f6" stroke-width="2"/>
</svg>心电图
html
<svg width="400" height="100">
<polyline points="0,50 30,50 40,50 50,50 55,30 60,70 65,20 70,80 75,50 85,50 120,50 150,50 160,50 170,50 175,30 180,70 185,20 190,80 195,50 205,50 240,50 270,50 280,50 290,50 295,30 300,70 305,20 310,80 315,50 325,50 360,50 400,50"
fill="none" stroke="#22c55e" stroke-width="2"/>
</svg>锯齿形装饰
html
<svg width="400" height="50">
<polyline points="0,25 20,5 40,25 60,5 80,25 100,5 120,25 140,5 160,25 180,5 200,25 220,5 240,25 260,5 280,25 300,5 320,25 340,5 360,25 380,5 400,25"
fill="none" stroke="#f59e0b" stroke-width="3"/>
</svg>手绘下划线
html
<svg width="200" height="30">
<polyline points="5,20 20,18 40,22 60,17 80,21 100,18 120,22 140,17 160,20 180,18 195,20"
fill="none" stroke="#ef4444" stroke-width="3" stroke-linecap="round"/>
</svg>对勾图标
html
<svg width="50" height="50">
<polyline points="10,25 20,35 40,15"
fill="none" stroke="#22c55e" stroke-width="4"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>音频波形
html
<svg width="200" height="60">
<polyline points="10,30 20,15 30,30 40,10 50,30 60,20 70,30 80,5 90,30 100,25 110,30 120,18 130,30 140,12 150,30 160,22 170,30 180,28 190,30"
fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round"/>
</svg>下一步
学会了折线，接下来让我们学习功能强大的 SVG 路径！