SVG简单绘制总结

 <svg  class="svg1" width='400px' height='400px' fill="#ccc">
      <!-- rect画矩形 -->
      <rect x="20" y="20" rx="10" ry="10" width="100" height="100"></rect>
      <!-- cx是圆心x位置 cy是圆心的y位置  -->
      <circle cx="150" cy="100" r="20"></circle>
      <!-- x1是线条的起点位置 x2结束 y1是线条起点 y2是终点 -->
      <line x1="10" x2="50" y1="110" y2="110" stroke="#000"></line>
      <!-- polygon多边形  其中是点到点的坐标 最后一个点自动回到起点 默认为直线-->
      <polygon points = "50 160, 55 180, 70 180, 60 190, 65 205,
       50 195, 35 205, 40 190, 30 180, 45 180"></polygon>
       <!-- svg中的path是最常见的形状 -->
  </svg>

1.如图我们首先创建一个宽为400像素，高为400像素，填充颜色（fill)为灰色的svg图标

2.<rect>标签是用来绘制一个矩形

3.<circle>标签画圆

4.<line>标签用来绘制线段

5.<polygon>标签用来绘制复杂的直线图形，其中50 160是坐标，中间以逗号隔开，注意，最后一个坐标默认会和第一个坐标连接

6.此外svg还有path用来绘制更复杂的图形，path比较复杂，就不讲了~