随机放置svg多边形

<svg id="svg-container"></svg>

polygon {
  fill: #ff0000; /* 填充颜色 */
  stroke: #000000; /* 边框颜色 */
  stroke-width: 2px; /* 边框宽度 */
}

var svgContainer = document.getElementById('svg-container');
var width = svgContainer.clientWidth;
var height = svgContainer.clientHeight;

var numSides = 6; // 多边形的边数
var radius = 50; // 多边形的半径

for (var i = 0; i < 10; i++) {
  var x = Math.random() * (width - radius * 2) + radius;
  var y = Math.random() * (height - radius * 2) + radius;

  var points = ""; // 多边形的顶点坐标

  for (var j = 0; j < numSides; j++) {
    var angle = (2 * Math.PI * j) / numSides;
    var px = x + radius * Math.cos(angle);
    var py = y + radius * Math.sin(angle);
    points += px + "," + py + " ";
  }

  var polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
  polygon.setAttribute("points", points);

  svgContainer.appendChild(polygon);
}