Question

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

＆＃13;

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");

＆＃13;

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

＆＃13;

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>

动态创建的`circle`不可见

1 个答案: