SVG形状相关元素

• 矩形<rect>

  rect元素用于创建矩形和矩形的变种。其上的属性如下：

  1. x属性和y属性，定义矩形的左侧位置和顶端位置，它们一起定义了矩形的左上角。
  2. width属性，定义矩形的宽，以左上角点沿x正轴延伸的距离。
  3. height属性，定义矩形的高，以左上角点向y正轴延伸的距离。
  4. rx属性和ry属性，定义矩形圆角的尺寸。

  示例及代码如下：

  <svg>
      <rect x='100' y='20' rx='10' ry='10' width='100' height='100' style='stroke: black; stroke-width: 1px;' />
  </svg>
  						

• 圆形<circle>

  circle元素用于创建一个圆。其上的属性如下：

  1. cx属性和cy属性，分别定义圆心的x坐标和y坐标，如果没有设置，则为默认的(0, 0)。
  2. r属性，定义圆的半径。

  示例及代码如下：

  <svg>
      <circle cx='50' cy='50' r='10' />
  </svg>
  						

• 椭圆<ellipse>

  ellipse元素用于创建椭圆，其上的属性如下：

  1. cx属性和cy属性，定义圆心的位置。
  2. rx属性和ry属性，定义椭圆的水平半径和垂直半径。

  示例及代码如下：

  <svg>
      <ellipse cx='50' cy='50' rx='10' ry='5' />
  </svg>
  						

• 线条<line>

  line元素用来创建线条（直线）。其上的属性如下：

  1. x1属性和y1属性，定义线条起始点的位置。
  2. x2属性和y2属性，定义线条终止点的位置。

  示例及代码如下：

  <svg>
      <line x1='50' y1='50' x2='200' y2='50' style='stroke: black;stroke-width: 2;' />
  </svg>
  						

• 多边形<polygon>

  polygon元素用来创建含有不少于三条边的图形。

  其上的points属性，定义多边形每个角的x坐标和y坐标，坐标间可以用逗号或者空格隔开。具体示例及代码如下：

  <svg>
      <polygon points='100,10 20,80 180,80' style='fill: white;stroke: black;' />
  </svg>
  						

• 折线<polyline>

  polyline用来创建仅包含直线的形状。

  其上的points属性，定义折线的各个点的坐标。示例及其代码如下：

  <svg>
      <polyline points='100,10 20,80 180,80' style='fill: white;stroke: black;' />
  </svg>
  						

• 路径<path>

  path元素用来定义路径，其上的d属性用来定义路径信息，它的值是由一个“命令+参数”的序列。每一个命令都有两种表示方式，大写字母表示采用绝对定位，小写字母表示采用相对定位（以上一个点为基准来计算）。具体命令如下：

  1. M，moveto，该命令会把画笔移动到后面紧跟的参数表示的位置，但不画线。
  2. L，lineto，该命令会在紧跟其后的参数表示的位置和L前面画笔所在点间画一条直线。
  3. H，该命令用来绘制平行线，后面紧跟一个参数，表示在x轴移动的位置。
  4. V，该命令用来绘制垂直线，后面紧跟一个参数，表示在y轴移动的位置。
  5. Z，该命令用来闭合路径，从当前点画一条直线到路径的起点，Z命令不区分大小写。
  6. C，该命令用来绘制三次贝塞尔曲线，其后跟随着三个点参数，前两个是控制点，最后一个是曲线的终点。
  7. S，该命令与C命令或者S命令搭配使用，画出一条三次贝塞尔曲线，其后跟随两个点参数，第一个是终点的控制点，第二个是终点，而起点的控制点默认为上一个控制点的对称点。
  8. Q，该命令用来创建二次贝塞尔曲线，其后跟随两个点参数，一个是控制点，另一个是终点。
  9. T，该命令与Q命令或者T命令搭配使用，它和Q的关系和S与C的很像，其后跟随一个点参数，即终点，控制点默认为上一个控制点的对称点。
  10. A，该命令用来创建弧形曲线。

  示例及代码如下：

  <svg width='600'>
      <path d='M20,20 L100,20 V80 H20 Z' style='fill: white;stroke: black;' >
      <path d='M150,80 C180,10 205,10 235,80 S310,150 320,80' stroke='red' fill='white' />
      <path d="M330,80 Q372.5,10 415,80 T500,80" stroke="blue" fill="white"/>
  </svg>
  						

参考资料

• SVG教程(w3school)
• 路径(MDN)