JS动态创建的SVG polygon已加入DOM但无法渲染，求故障排查

核心错误原因 #

动态创建的SVG <polygon>无法显示，是因为SVG属于XML命名空间元素，不能用普通的document.createElement()创建，必须使用document.createElementNS()并指定SVG的命名空间http://www.w3.org/2000/svg，否则浏览器无法识别这是SVG图形元素，自然不会渲染。

另外还有一个逻辑小问题：绘制正方形时，你定义了radius2 = radius / 2，但计算顶点坐标时误用了radius，导致正方形尺寸不符合预期。

修改后的完整代码 #

HTML

<svg class="canvas" xmlns="http://www.w3.org/2000/svg">
  <polygon class="main"></polygon> 
</svg>

CSS

.main {
  fill: none;
  stroke: indigo;
  stroke-width: 1;
  animation: rotate 5s infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0)
  }
  100% {
    transform: rotate(360deg)
  }
}

JavaScript

var canvas = document.getElementsByClassName("canvas")[0]
canvas.setAttribute('viewBox', "-100 -100 1000 1000");

var centre = [0, 0];
var radius = 70;
var numPoints = 3;
var theta = 350.00 / numPoints;

var points = ""
var pointsArr = []
for (var i = 1; i <= numPoints; i++) {
  // calc x/y
  x = radius * Math.cos(2 * Math.PI * i / numPoints + theta) + centre[0];
  y = radius * Math.sin(2 * Math.PI * i / numPoints + theta) + centre[1];
  pointsArr.push([x, y])
  points = points + `${x},${y} `
}

prev = pointsArr[pointsArr.length - 1]
midPoints = []
for (var i = 0; i < numPoints; i++) {
  cur = pointsArr[i]
  midPoints.push([(prev[0] + cur[0]) / 2, (prev[1] + cur[1]) / 2])
  prev = pointsArr[i]
}

// 设置初始多边形的点
var polygon = document.getElementsByClassName("main")[0]
polygon.setAttribute('points', points);

// 绘制三个正方形
for (var j = 0; j < numPoints; j++) {
  var centre2 = midPoints[j];
  var radius2 = radius / 2;
  var numPoints2 = 4;
  var theta2 = 350.00 / numPoints2;

  var points2 = ""
  var pointsArr2 = []
  for (var i = 0; i < numPoints2; i++) {
    // 修正：使用radius2而不是radius计算正方形顶点
    x = radius2 * Math.cos(2 * Math.PI * i / numPoints2 + theta2) + centre2[0];
    y = radius2 * Math.sin(2 * Math.PI * i / numPoints2 + theta2) + centre2[1];
    pointsArr2.push([x, y])
    points2 = points2 + `${x},${y} `
  }

  // 修正：用createElementNS创建SVG polygon元素
  var polygon2 = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')
  polygon2.setAttribute('class', 'main')
  polygon2.setAttribute('points', points2)
  canvas.appendChild(polygon2)
}

关键修改点 #

• 替换document.createElement('polygon')为document.createElementNS('http://www.w3.org/2000/svg', 'polygon')
• 计算正方形顶点时，将radius改为radius2，确保尺寸正确

内容的提问来源于stack exchange，提问作者maininformer