SVG基础----绘制SVG直线

1、绘制直线

x1和y1属性用于指定直线的起点，x2和y2属性用于指定直线的终点。可以使用style属性来为直线设置颜色和描边宽度。

<svg>
    <line x1="100" y1="100" x2="200" y2="200" style="stroke:#1D7DB1;"></line>
</svg>

2、绘制折线

<polyline>元素用于绘制SVG折线。

<svg>
    <polyline points="0 0, 30 0, 15 30" style="fill: #1D7DB1;"></polyline>
</svg>

3、折线描边

<svg>
    <polyline points="10 10, 30 10, 20 30, 10 10" style="stroke:#27AE60;fill: #1D7DB1;"></polyline>
</svg>

4、绘制多边形

<polygon>元素用于绘制SVG多边形

<svg>
  <polygon points="50,5   100,5  125,30  125,80 100,105
                   50,105  25,80  25, 30"
          style="stroke:#27AE60; fill:#1D7DB1; stroke-width: 3;"/>
</svg>