SVG绘制折线

<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>

标签：SVG,绘制,折线
来源： https://www.cnblogs.com/xl4ng/p/15858991.html