动态创建的“圆圈”不可见

Dynamically Created `circle` not visible

本文关键字：圆圈 创建 动态      更新时间：2023-09-26

我有以下代码。我可以通过inspect元素看到新创建的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>

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>

相关文章：