通过 appendChild() 添加的孩子不会出现

Question

它正确地获取了所有数据，显示在 console.log() 中，但是当附加它时它确实显示在 devTools 中，但没有显示在屏幕上。

我还尝试将我从控制台获得的内容粘贴到页面上，看看是否有任何差异，但没有，但粘贴的代码显示在屏幕上。

有人知道我该如何修复它吗？

编辑：添加了 HTML 并将 x 和 y 值放入我从之前的代码中获得的值，因此更加清晰。

var element;
var i = 1;
var x = 799.8;
var y = 620;
element = document.createElement("circle");
element.id = "circle" + (i + 1);
element.setAttribute("cx", x);
element.setAttribute("cy", y);
element.setAttribute("r", "500");
element.setAttribute("fill", "#42b6f4")
document.getElementById("svghead").appendChild(element);

这里是 HTML:

<svg id="svghead" style="flex: 1 1 0%; height: 90%; margin-left: 3%; 
    width: 86.8%; border: 1px solid black;"></svg>

Answer 1

请记住，您不能使用简单的 createElement() 创建 svg 元素，您需要使用带有额外参数的 createElementNS()

let svgns = "http://www.w3.org/2000/svg";
var elm;
elm = document.createElementNS(svgns,"circle");

通过 appendChild() 添加的孩子不会出现

Appended childs through appendChild() don't show up

javascript

appendchild