CODEWITHSUNDEEP
javascripthtmlsvg
ozil
ozil

Reputation: 7117

Dynamically Created `circle` not visible

I have the following code. I can see newly created circle by inspect element. But It is not visible on page. 

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>

Upvotes: 0

Views: 77

Answers (1)

Robert Longson
Robert Longson

Reputation: 124249

SVG elements must be created in the SVG namespace. I.e.

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>

Upvotes: 3

Related Questions