使用svg来画正五角星，主要是使用svg的path功能，通过画出五个角的坐标以及连接线，来组成一个实心的五角星形状。实现效果可以参考butterPig的在线印章设计功能里面的正五角星形状。

其原理主要是利用数学中的三角函数公式，来计算出每个角的相对位置坐标。具体代码如下所示： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
star(width) {
        let x = -width / 2;
        let y = -((width / 2) / Math.tan(72 / 180 * Math.PI))
        let coordB = {
            x0: x + width,
            y0: y
          },
          coordD = {
            x0: x + width* Math.sin(36 / 180 * Math.PI) * Math.tan(18 / 180 * Math.PI),
            y0: y + width * Math.sin(36 / 180 * Math.PI)
          },
          coordA = {
            x0: x + width / 2,
            y0: y - width / 2 * Math.tan(36 / 180 * Math.PI)
          },
          coordC = {
            x0: x + width* Math.cos(36 / 180 * Math.PI),
            y0: y + width * Math.sin(36 / 180 * Math.PI)
          }
        //绘制星星
        return `${x},${y} ${coordB.x0},${coordB.y0} ${coordD.x0},${coordD.y0} ${coordA.x0},${coordA.y0} ${coordC.x0},${coordC.y0}`
      }

该方法画出的正五角星是以它的中心为原点,向周围缩放伸展的。width代表了横向边的最大长度，即五角星的最大宽度，通过改变width的值，可以调整五角星的缩放大小。方法的输出为正五角星的svg路径path，直接赋值到polygon标签的points属性中即可。想移动五角星的位置，可以通过:transform=”‘translate(x,y)’”来对五角星的原点（中心点）进行位移。