SVG简易入门（极简）

svg标签

<svg>标签相当于屏幕的窗口（也就是视口），所有的图形都绘制在这个视口上，可以在svg标签内通过width与height为它设置大小，例：

<svg width="200px" height="200px">

这里的视口是宽高均为200px的正方形，宽高的长度也可以不使用px，而是使用相对大小：

<svg width="200" height="200">

这样它的宽高实际上屏幕大小单位，例如px。

在svg标签内含有一个属性viewBox，viewBox属性定义了视口上可以显示的区域：

<svg width="200" height="200" viewBox="0 0 50 50">

上述代码表示viewBox从(0,0)点开始，100宽100高的区域。这个100100的区域，会放到200*200的画布上显示。于是就形成了放大两倍的效果。(也就是说第一个、第二个参数是起点的坐标，第三、第四个参数是终点的坐标，切记Y轴是从上往下的)。

图形

线段

<line>标签用于绘制线段：

<svg width="200" height="100" viewBox="0 0 200 50">
  <line x1=<