SVG Polylines are rendered only after modifying HTML on inspector

Question

My code adds polylines to a SVG, but these are not rendered.

But if I open the inspector (F12 on Chrome), find them in source, right click on them, edit as HTML, add a space and press enter, they get rendered!

What am I missing here?

function drawLine(x1, y1, x2, y2) {
    var line = document.createElement("polyline");
    line.style.cssText = "fill:none;stroke:black;stroke-width:2";

    var linePoints = `${x1},${y1} ${x2},${y2}`;
    line.setAttribute('points', linePoints);

    window.linesContainer.appendChild(line);
}

Edit1:

Something interesting is that initially the polyline seems to have 0pxw and 0pxh

While after modifying it, it gets a size:

@mkaatman same way. Edge doesn't render them even after modifying as HTML. — Alvin Sartor, Feb 06 '20 at 17:52

Steve · Accepted Answer · 2020-02-06T18:07:48.920

For non-HTML elements (in this case SVG), you should use createElementNS, though you shouldn't use setAttributeNS with the SVG namespace

So the new code is:

var svg_NS = 'http://www.w3.org/2000/svg';
var svg = document.getElementById('svg');
function drawLine(x1, y1, x2, y2) {
    var line = document.createElementNS(svg_NS, "polyline");
    line.style.cssText = "fill:none;stroke:black;stroke-width:2";
    
    var linePoints = `${x1},${y1} ${x2},${y2}`;
    line.setAttribute('points', linePoints);
    
    window.linesContainer.appendChild(line);
}
    
drawLine(0,0,200,200)

<svg id="linesContainer"></svg>

See more:

https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course https://stackoverflow.com/a/6701928/6184972

SVG Polylines are rendered only after modifying HTML on inspector

1 Answers1