在JavaScript中动态创建的svg折线未在页面上显示

Question

我试图在div中添加一堆折线。它显示它们已在元素控制台中成功创建，但它们未出现在屏幕上。我有两个版本（一个标记出来），都产生相同的结果。  我在Chrome中测试。

$(".brktBox").append("<svg id=svgBox width="+bracket.brktBox.width+" height="+bracket.brktBox.height+">")

for (i = 0; i < bracket.lineCoords.length; i++){

    // temp var
    var tv = bracket.lineCoords[i]
    var points = `${tv.pt1x},${tv.pt1y} ${tv.pt2x},${tv.pt2y} ${tv.pt3x},${tv.pt3y} ${tv.pt3x},${tv.pt3y}`;

    //work around from lower version that also doesn't work
    var newLine = document.createElementNS(null,"polyline");
    newLine.setAttributeNS(null, "points", points);
    document.getElementById('svgBox').appendChild(newLine);

    //one version that doesn't work
    // $("#svgBox").append("<polyline class=svgLine id=svg"+i+" />")
    // $("#svg"+i).attr("points", points)
}

另外，我理解电视的温度变化很糟糕。