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

Question

The function below is meant to insert a <polygon></polygon> into an <svg id = "svg-overlays"></svg>.

I can see that the element gets successfully inserted when the function is called. However, the polygon is still not visible. If I do the insertion manually within the html document I get the desired polygon.

Unable to determine what the issue is here.

 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);
    };

Tags are markup, the DOM has elements (hence *createElement*). ;-) — RobG, Sep 04 '15 at 02:07
you need to create svg element like this: `document.createElementNS("http://www.w3.org/2000/svg", "polygon");` — gp., Sep 04 '15 at 02:16

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

Try to use

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

You need to specify SVG name space. There are several examples in stackoverflow.

Creating SVG elements dynamically with javascript inside HTML

Add SVG element to existing SVG using DOM

edited May 23 '17 at 11:44

Community

1
1

answered Sep 04 '15 at 02:33

Kagan Agun

489
1
6
7

Thank you for the solution and the references. Problem solved now. – Arshavsky Sep 04 '15 at 03:49

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

1 Answers1