vue svg polygon 画一个平方的六边形

在Vue项目中使用SVG来绘制一个正六边形，可以通过`<svg>`标签和`<polygon>`标签来实现。`<polygon>`标签用于创建包含三个或更多点的闭合图形。要画一个正六边形，你需要定义六个顶点。

以下是一个简单的例子，展示了如何在Vue组件中创建一个正六边形：

<template>
  <div id="app">
    <svg width="200px" height="200px" viewBox="0 0 200 200">
      <polygon
        :points="hexagonPoints"
        fill="#ccc"
        stroke="black"
        stroke-width="2"
      />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'Hexagon',
  computed: {
    hexagonPoints() {
      const sideLength = 50; // 正六边形每边的长度
      const centerX = 100; // 正六边形中心点的X坐标
      const centerY = 100; // 正六边形中心点的Y坐标
      const points = [];

      // 计算六个顶点的坐标
      for (let i = 0; i < 6; i++) {
        const angle = (i * 60 + 30) * (Math.PI / 180); // 将角度转换为弧度
        points.push(`${centerX + sideLength * Math.cos(angle)},${centerY + sideLength * Math.sin(angle)}`);
      }
      return points.join(' ');
    }
  }
}
</script>

在这个例子中，我们定义了一个计算属性`hexagonPoints`来动态计算六个顶点的坐标。`viewBox`属性定义了SVG视窗的大小，而`<polygon>`标签的`points`属性则是用来定义六边形各个顶点的坐标。