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