svg标签

svg： svg标签用来绘制图片，本质是使用代码来制作一张画布，在画布上绘制图形。

rect： 用来绘制一个矩形，width用来定义矩形的宽度，height用来定义矩形的高度，stroke-width用来给矩形描边，stroke用来定义边框颜色。

circle： 用来绘制一个圆型，cx属性用来定义圆形中心点的X坐标，cy属性用来定义圆形中心点的Y坐标，r属性用来定义半径长度，fill用来定义填充颜色。

ellipse 用来绘制一个椭圆，使用cx，cy属性来定义椭圆的焦点，rx，ry用来定义椭圆距离边框的距离

line 用来绘制一条直线，使用x1，y1确定线条的起点，x2，y2确定线条的终点。

polygon 用来绘制多边形，使用多组坐标来绘制多边形

polyline 用来绘制折线，使用多组坐标来绘制折线图

text 用来绘制文本

`<svg width="500" height="200">
    <text x="0" y="15" fill="red" transform="rotate(20 20,40)">I LOVE HTML</text>
</svg>
`

path标签用来绘制线条，与polyline标签不同的是，path标签的绘制能力更强大，可以绘制贝塞尔曲线。

`<svg height="200" width="500">
    <g fill="none" stroke="black" stroke-width="6">
        <path stroke-linecap="butt"  d="M5 20 l215 0"></path>
        <path stroke-linecap="round" d="M5 40 l215 0"></path>
        <path stroke-linecap="square" d="M5 60 l215 0"></path>
        <path stroke-linecap="inherit" stroke-dasharray="10,10" d="M5 80 l215 0"></path>
    </g>
</svg>`