我这段代码为什么svg不显示？大佬们存在什么问题?

let svggg=document.createElementNS("http://www.w3.org/2000/svg", "line");//创建一个直线类型的svg

svggg.setAttribute("x1","100");//设置起点横坐标

svggg.setAttribute("y1","100");//设置起点纵坐标

svggg.setAttribute("x2","200");//设置终点横坐标

svggg.setAttribute("y2","200");//设置终点纵坐标

svggg.setAttribute("style","stroke:aqua;stroke-width:2");//设置线条样式

document.body.appendChild(svggg);//将该元素添加进body，lrc歌词以显示出来。

我按F12调出开发者工具，确实查看到有这么个元素，为什么还是不显示呢？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<line x1="100" y1="50" x2="300" y2="90" style="stroke:aqua;stroke-width:2"/>

svg>

我在HTML里面这样的代码就能创建线条。
是因为HTML里面line有些属性存在默认值，然后在js里面创建，这些默认值不指明就不会被创建么？

用canvas吧，svg 创建里面的dom应该也可以 react, line

canvas我用过。
这里只是想要学习svg。所以碰到障碍我更希望是解决而不是避开。

//通过createElementNS创建svg元素并设置属性

var svg=document.createElementNS('http://www.w3.org/2000/svg','svg');    

svg.setAttribute("style","width:300px;height:300px;");

svg.setAttribute("viewBox","0 0 300 300");

var line=document.createElementNS("http://www.w3.org/2000/svg", "line");//创建一个直线类型的svg

line.setAttribute("x1","100");//设置起点横坐标

line.setAttribute("y1","100");//设置起点纵坐标

line.setAttribute("x2","200");//设置终点横坐标

line.setAttribute("y2","200");//设置终点纵坐标

line.setAttribute("style","stroke:aqua;stroke-width:2");//设置线条样式

svg.appendChild(line);

document.body.appendChild(svg);//将该元素添加进body，以显示出来。

先创建一个svg元素，设置属性，然后再创建line，line添加到svg元素里，再将svg元素添加到页面

感谢。