<svg xmlns="http://www.w3.org/2000/svg"
width="100px" height="130px" viewBox="0 0 100 130">
<!-- 未设置fill:none时,折现会被填充 -->
<polyline points="5 20,20 20,25 10,35 30,45 10,55 30,65 10,75 30,80 20 ,95 20"
style="stroke:black;stroke-width:3;" />
<polyline points="5 50,20 50,25 40,35 60,45 40,55 60,65 40,75 60,80 50 ,95 50"
style="stroke:black;stroke-width:3;fill:none" />
<!-- stroke-linejoin属性,可选值:miter,round,bevel -->
<polyline points="5 80,20 80,25 70,35 90,45 70,55 90,65 70,75 90,80 70 ,95 70"
style="stroke:black;stroke-width:3;fill:none;stroke-linejoin:round" />
<!-- 线帽stroke-linecap属性设置 -->
<line x1="5" y1="100" x2="95" y2="100"
style="stroke:black;stroke-width:5;stroke-linecap:butt;" />
<line x1="5" y1="110" x2="95" y2="110"
style="stroke:black;stroke-width:5;stroke-linecap:round;" />
<line x1="5" y1="120" x2="95" y2="120"
style="stroke:black;stroke-width:5;stroke-linecap:square;" />
<!-- 线头位置 -->
<line x1="5" y1="100" x2="5" y2="120" style="stroke:#999" />
<line x1="95" y1="100" x2="95" y2="120" style="stroke:#999" />
</svg>