JS成功添加了一个标签,但网页显示失败

JS successfully appends a tag, web page fails to display though

本文关键字:标签 网页 失败 显示 一个 添加 成功 JS      更新时间:2023-09-26

下面的函数表示将<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);
    };

尝试使用

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

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

在HTML中使用javascript动态创建SVG元素

使用DOM将SVG元素添加到现有SVG