JS成功添加标签，但网页无法显示，但

Question

下面的功能旨在将<polygon></polygon>插入到<svg id = "svg-overlays"></svg>中。

当函数被调用时，我可以看到元素被成功插入。但是，多边形仍然不可见。如果我在html文档中手动插入，我会得到所需的多边形。

无法确定问题在这里。

function changeFloorImage(floor) { 

     var overlays = document.getElementById("svg-overlays"); 
     var polygon = document.createElement("polygon"); 

     polygon.className = "apartment-overlay"; 
     polygon.setAttribute("points", "740,88 972,88 972,353 740,353"); 

     overlays.appendChild(polygon); 
    }; 

Answer 1

尝试使用

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

您需要指定SVG名字空间。在stackoverflow中有几个例子。

Creating SVG elements dynamically with javascript inside HTML

Add SVG element to existing SVG using DOM