如何简化创建SVG地图的JavaScript代码且不破坏功能？

• DOM节点唯一性限制：你复用的是单个<polygon> DOM对象，每次修改points后将其添加到SVG容器时，实际上只是把这个节点从原来的位置（如果已存在）移动到容器中，而非创建新节点。DOM树中一个节点只能存在一个位置，最终页面上只会保留最后一次添加的polygon，其他区域的图形都被覆盖了，所以看起来地图没显示。
• 控制台数据正常的原因：你修改points的逻辑是正确的，控制台能输出正确的坐标数据，但DOM操作的逻辑错误导致节点没有被正确批量添加。

方案1：复用创建节点的逻辑（推荐） #

写一个通用函数负责生成单个polygon节点，循环原始数据时调用该函数创建新节点，避免复用同一个DOM对象：

// 通用polygon生成函数
function createRegionPolygon(points, fillColor = '#ccc', strokeColor = '#000') {
  const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
  polygon.setAttribute('points', points);
  polygon.setAttribute('fill', fillColor);
  polygon.setAttribute('stroke', strokeColor);
  return polygon;
}

// 遍历数据生成地图
const svgContainer = document.getElementById('map-svg');
regionData.forEach(region => {
  const poly = createRegionPolygon(region.points, region.fill);
  svgContainer.appendChild(poly);
});

注意：SVG元素必须用createElementNS指定SVG命名空间，否则节点无法被正确识别渲染。

方案2：批量创建节点提升性能 #

如果区域数量较多，用DocumentFragment批量创建所有节点后一次性添加，减少DOM重绘次数：

const fragment = document.createDocumentFragment();
regionData.forEach(region => {
  const poly = createRegionPolygon(region.points, region.fill);
  fragment.appendChild(poly);
});
svgContainer.appendChild(fragment);

方案3：复用样式而非节点（适合样式统一场景） #

如果所有区域样式一致，可以定义一个基础polygon的样式，然后每个区域创建独立节点复用样式：

/* 用CSS统一设置样式 */
.region-polygon {
  fill: #ccc;
  stroke: #000;
  stroke-width: 1;
}

regionData.forEach(region => {
  const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
  poly.setAttribute('points', region.points);
  poly.classList.add('region-polygon');
  svgContainer.appendChild(poly);
});

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