概要总结
1、线条、多边形、多线条的公共属性
2、线条line
3、多边形polygon
4、多线条polyline
一、公共属性
1、stroke: 边框颜色。
2、stroke-width: 边框宽度，Number类型。
3、stroke-opacity: 描边颜色的不透明度，合法值的范围是0~1。
4、fill: 填充颜色，值为合法颜色，例如颜色名称、rgb颜色值、十六进制颜色值等。
5、fill-opacity: 填充颜色的不透明度，合法值的范围是0~1。
6、opacity: 整个矩形的不透明度，合法值的范围是0~1。
二、线条line
1、属性
(1)x1: x轴上直线的起点坐标，Number类型。
(2)y1: y轴上直线的起点坐标，Number类型。
(3)x2: x轴上直线的末端坐标，Number类型。
(4)y2: y轴上直线的末端坐标，Number类型。
2、案例
通过x1、y1、x2、y2四个属性绘制一个线条。
<svg width="500" height="210" style="background: #eee">
<line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="2"/>
</svg>
3、代码演示
三、多边形polygon
1、概念
多边形用于创建一个至少包含三个边的图形。多边形是由直线组成的，形状是封闭的，所有的线都连接起来。
它有一个重要的属性points，就是多个点的意思。points属性定义了多边形每个角的x和y的坐标，它的值至少要三对坐标，每一对坐标的x和y用逗号隔开，坐标之间用空格隔开。
2、属性
(1)points: 多边形每个角的x和y坐标，坐标的x和y用逗号隔开，坐标之间用空格隔开，String类型。
3、案例
通过points属性绘制一个多边形。
1.三角形
<svg width="500" height="210" style="background: #eee">
<polygon points="200,20 250,190 160,210" fill="lime" stroke="purple" stroke-width="1"/>
</svg>
2.四边形
<svg width="500" height="250" style="background: #eee">
<polygon points="200,10 300,210 170,250 123,234" fill="lime" stroke="purple" stroke-width="1"/>
</svg>
3.五角星
<svg width="500" height="210" style="background: #eee">
<polygon points="100,10 40,198 198,78 10,78 160,198" fill="lime" stroke="purple" stroke-width="5"/>
</svg>
4、代码演示
四、多线条polyline
1、概念
它可以创建任何只由直线组成的形状，一般是把几个点连接起来，不要求封闭。
它有一个重要的属性points，定义绘制折线所需的点，也就是两个以上的x和y的坐标对。
2、属性
(1)points: 多线条每个角的x和y坐标，坐标的x和y用逗号隔开，坐标之间用空格隔开，String类型。
3、案例
通过points属性绘制一个多线条。
1.绘制多线条
<svg width="500" height="200" style="background: #eee">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" fill="none" stroke="black" stroke-width="3"/>
</svg>
2.楼梯剖面
<svg width="500" height="180" style="background: #eee">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="none" stroke="red" stroke-width="4"/>
</svg>
4、代码演示
五、代码链接
