[SVG][HTML5] 加载后添加POLYGONS元素不显示问题求助

嘿，我碰到过类似的问题！这其实是jQuery处理SVG元素的一个小坑——SVG属于XML命名空间，而jQuery默认是在HTML命名空间下创建元素的，直接用.append()添加<polygon>标签，浏览器没法把它识别成SVG的多边形，自然就不渲染啦。下面给你两种靠谱的解决方法：

方法1：用原生JS创建SVG命名空间的元素 #

直接通过原生JavaScript创建带SVG命名空间的多边形元素，再用jQuery添加到SVG容器里：

// 创建SVG命名空间下的polygon元素
const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
// 设置多边形的属性（比如顶点、填充色、描边）
polygon.setAttribute("points", "100,100 200,50 300,100 250,200 150,200");
polygon.setAttribute("fill", "#4CAF50");
polygon.setAttribute("stroke", "#333");
polygon.setAttribute("stroke-width", "2");
// 添加到你的SVG容器中
$("#map").append(polygon);

方法2：用jQuery解析SVG XML字符串 #

如果习惯用字符串拼接的方式，可以先把多边形的XML内容解析成符合SVG命名空间的DOM元素，再添加：

// 定义多边形的SVG字符串
const polygonStr = '<polygon points="100,100 200,50 300,100 250,200 150,200" fill="#2196F3" stroke="#333" stroke-width="2"/>';
// 解析XML字符串
const xmlDoc = $.parseXML(polygonStr);
// 获取解析后的多边形元素
const polygon = xmlDoc.documentElement;
// 添加到SVG容器
$("#map").append(polygon);

另外要注意检查几个细节：

• 确保你的<svg>容器有正确的width、height属性，并且样式没有被隐藏（比如display: none）
• 多边形的points属性值格式要正确，每个坐标用空格或逗号分隔都可以，但要保持一致
• 给多边形设置明显的fill或stroke属性，不然可能因为和背景色一致而看不到

内容的提问来源于stack exchange，提问作者P. Jerome