先学会画线。使用line标签画线，line表示线，扩展为线。它是一个单一的标签，基本语法是：caretline,slashcaret。它有几个重要的属性：x1属性定义了直线在x轴上的起点坐标。y1属性定义直线起点在y轴上的坐标。x2属性，定义直线在x轴上的终点坐标。y2属性定义直线在y轴上的终点坐标。你可能会问，坐标的起点在哪里？其实对于所有的SVG图形绘制来说，坐标的起点都是画布的左上角，从起点开始，向右看为x轴，向下看为y轴。我们称这个坐标系为屏幕坐标系。与众所周知的数学坐标系不同的是y轴是相反的。打开编辑器，新建line_polygon_polyline.html文件，完成基本代码，在body中添加svg标签，定义属性width为500，height为210。在svg中添加line标签，定义属性x1等于0，y1等于0，x2等于200，y2等于200，stroke等于red，stroke-width等于2。保存文档。在浏览器中预览，并绘制一条线。接下来，我们学习绘制多边形。使用polygon标签绘制多边形，polygon['pɑ?l?ɡɑ?n]表示多边形。这个词来自希腊语：poly意思是“许多”，gon意思是“角度”。它是一个单一的标签，基本语法是：caretpolygon,slashcaret。它用于创建至少具有三个边的图形。多边形由直线组成，形状是“封闭的”，所有的线都连接在一起。它有一个重要的属性：points，意思是多个点。points属性定义多边形每个角的x和y坐标。它的值必须至少是三对坐标，每对坐标的x和y用逗号隔开，坐标之间用空格隔开。这里，我们可以这样理解：拿起一根直笔，从第一个坐标点开始，按照坐标定义的顺序连接各个坐标点，最后回到起点，这些线围成一个多边形。回到编辑器，在之前的svg末尾添加一个br标签。回车和换行。添加一个新的svg标签，其属性宽度等于500，高度等于210。在svg中添加一个polygon标签，属性points的值为"220,20250,190160,210"，fill等于lime，stroke等于purple，stroke-width等于1。保存。回到浏览器，刷新，一个三角形就画出来了。让我们模拟绘图过程。我们再画一个四边形。回到编辑器，在之前的svg末尾添加一个br标签。回车和换行。添加一个新的svg标签，属性width等于500，height等于250。在svg中添加一个polygon标签，属性点的值为“220,10300,210170,250123,234”（逗号和空格要读出来），fill等于lime，stroke等于purple，stroke-width等于1。保存。回到浏览器，刷新，一个四边形就绘制出来了。让我们模拟绘图过程。为了增加难度，让我们画一个五角星。回到编辑器，在之前的svg末尾添加一个br标签。回车和换行。添加一个新的svg标签，属性width等于500，height等于210。在svg中添加一个polygon标签，属性points的值为"100,1040,198190,7810,78160,198"，fill等于lime，stroke等于purple，stroke-width等于5。保存。回到浏览器，刷新，就会画出一个五角星。让我们再次模拟绘图过程。最后，我们学习画多条线。要绘制多条线，请使用polyline标签，这是一个单一的标签。基本语法是：caretpolyline,slashcaret。它可以创建任何仅由直线组成的形状，通常连接多个点，并且不需要闭合。它还有一个重要的属性points，定义了绘制折线所需要的点，即多于两个x和y坐标对。回到编辑器，在之前的svg末尾添加一个br标签。回车和换行。添加一个新的svg标签，其属性宽度等于500，高度等于200。在svg中添加polyline标签，属性点的值为“20,2040,2560,4080,120120,140200,180”（逗号和空格要读出来），stroke等于black，stroke-width等于为3，fill值为none。none是fill属性的特殊值，表示不填充任何颜色。节省。回到浏览器，刷新，一条由4条线段组成的折线就画出来了。让我们模拟绘图过程。（这里有演示动画，录制的时候，用正常的速度朗读即可。）我们来画一个楼梯的剖面图。回到编辑器，在之前的svg末尾添加一个br标签。回车和换行。添加一个新的svg标签，属性width等于500，height等于180。在svg中添加一个polyline标签，属性点的值为"0,4040,4040,8080,8080,120120,120120,160"(逗号和空格应读出），填充等于无，描边等于红色，描边宽度等于4。保存。回到浏览器，刷新，楼梯轮廓就画出来了。文章配套视频链接https://www.bilibili.com/video...
