创建只有一个长度的 svg 六边形点

Question

我正在尝试使用 svg 多边形创建六边形。

我想创建 x 以及为什么坐标，但我的代码不起作用。

我想我可以通过将每个点变换 60 度来使用三角函数。

这显然是行不通的。

const radius = 25;

const points = [0, 1, 2, 3, 4, 5, 6].map((n) => {
    const current = n * 60;

    return [radius * Math.cos(current), -radius * Math.sin(current)];
  }).map((p) => p.join(','))
  .join(' ');

document.querySelector('polygon')
  .setAttribute("points", "100,0 50,0 100,100");

<svg width="200px" height="200px" viewBox="0 0 200 200">
    <polygon points="" style="fill: #ccffcc; stroke: red;stroke-width: 3;"
    />
   
</svg>

Answer 1

根据this article可以转换成javascript如：

const radius = 50;
const height = 200;
const width = 200;

const points = [0, 1, 2, 3, 4, 5, 6].map((n, i) => {
    var angle_deg = 60 * i - 30;
    var angle_rad = Math.PI / 180 * angle_deg;
    return [width/2 + radius * Math.cos(angle_rad), height/2 + radius * Math.sin(angle_rad)];
  }).map((p) => p.join(','))
  .join(' ');

document.querySelector('polygon')
  .setAttribute("points", points);

<svg width="200px" height="200px" viewBox="0 0 200 200">
    <polygon points="" style="fill: #ccffcc; stroke: red;stroke-width: 3;"
    />
   
</svg>

创建只有一个长度的 svg 六边形点

create svg hexagon points with only only a length

javascript

svg

trigonometry