使用用户定义的 SVG 多边形

Question

我想取多边形的边数并相应地制作多边形。 有什么方法可以让我获取多边形的边数并根据它制作一个 SVG 多边形。 我有什么办法可以这样做吗？？

Answer 1

function makePolygon(posX, posY, numSides, size)
{
  var points = [];
  for (var i = 0; i < numSides; i++) {
    points.push(posX + size * Math.sin(2 * Math.PI * i / numSides));
    points.push(posY + size * Math.cos(2 * Math.PI * i / numSides));
  }

  // Create a polygon element
  var poly = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
  poly.setAttribute("points", points.join(','));
  
  // Add it to the SVG
  document.getElementById("mysvg").appendChild(poly);
}


makePolygon(250,250, 9, 200);

polygon {
  fill: yellow;
  stroke: blue;
  stroke-width: 10;
}

<svg id="mysvg" width="500" height="500"></svg>

Answer 2

您可以使用 svg polygon 元素创建 svg 多边形，您只需要计算多边形的顶点即可。假设您要创建一个正多边形（否则有无限数量的边为n 的多边形，则顶点可以计算为：

var vertices = [];
for(var i = 1; i <= n; i++) {
    vertices.push({
       x : Math.sin(2 * Math.PI * i / n),
       y : Math.cos(2 * Math.PI * i / n)
    });
}