svg 六边形

效果图

六边形战士

<svg>
  <g stroke="black" stroke-width="1px" fill="white">
    <path
      d="M20 0 L60 0 L80 40 L60 80 L20 80 L0 40 Z"
      stroke="#000"
      stroke-width="1"
    />
    <g class="SVGCenter">
      <text
        y="55%"
        x="50%"
        stroke-width="0"
        stroke="#000"
        fill="#000000"
        style="text-anchor: middle"
      >
        1
      </text>
    </g>
  </g>
</svg>