javascript - 动态创建的 `circle`不可见

Question

我有以下代码。我可以通过检查元素看到新创建的circle。但它在页面上不可见。

function drawCircle(x, y, r) {
    var circle = document.createElementNS(null, 'circle');
    circle.setAttributeNS(null, 'cx', x);
    circle.setAttributeNS(null, 'cy', y);
    circle.setAttributeNS(null, 'r', r);
    circle.setAttributeNS(null, 'fill', 'red');
    circle.setAttributeNS(null, 'stroke', 'black');
    circle.setAttributeNS(null, 'stroke-width', '2');
    document.getElementById("group").appendChild(circle);
}
drawCircle("50", "50", "30");

<svg id ="group" height="100" width="100"></svg>

Answer 1

SVG 元素必须在 SVG 命名空间中创建。即

function drawCircle(x, y, r) {
    var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    circle.setAttributeNS(null, 'cx', x);
    circle.setAttributeNS(null, 'cy', y);
    circle.setAttributeNS(null, 'r', r);
    circle.setAttributeNS(null, 'fill', 'red');
    circle.setAttributeNS(null, 'stroke', 'black');
    circle.setAttributeNS(null, 'stroke-width', '2');
    document.getElementById("group").appendChild(circle);
}
drawCircle("50", "50", "30");

<svg id ="group" height="100" width="100"></svg>