SVG的使用

svg呢，跟canvas其实都是用来画图的，只不过svg画的图，是矢量图，矢量图有个特点是，放大缩小，不会失真。

以下是几种常见的SVG应用

使用rect画矩形

<rect 
   x="30" y="30" 
   width="200" height="200" 
   fill="none" stroke="green" 
   stroke-width="5" rx="50" ry="100">
</rect>

         

   x：水平坐标轴   y：垂直坐标轴   rx：矩形圆角是以r为半径画的圆

---

使用circle画圆形，使用circle，还可以使用rect标签结合圆角的值实现圆形或椭圆形的绘制

<rect x="30" y="30" 
  width="200" height="200" 
  fill="none" stroke="aqua" 
  stroke-width="5" rx="100"></rect>

<circle cx="300" cy="300"
    r="100" fill="red" 
    stroke="green" stroke-width="10"
    stroke-opacity="0.3"></circle>

            cx：圆形的中心点x轴坐标

            cy：圆形的中心点y轴坐标

            r：圆形的半径

            stroke-opacity：设置线条的透明度

            fill-opacity：设置填充的透明度

---

使用ellipse画椭圆

<ellipse cx="200" cy="200" rx="100" ry="50"></ellipse>

使用line画直线

<line x1="0" y1="0" x2="100" y2="0" stroke="red"></line>

使用polyline画折线

<polyline points="0,0,0,100,50,100" stroke="green"></polyline>

使用画polygon闭合多边形

<polygon points="200 0 200 100 300 100 500 0 200 0" stroke="green" fill="none"></polygon>