javascript - Dynamically Created `circle` not visible -
i have following code. can see newly created circle
inspect element. 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>
svg elements must created in 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>
Comments
Post a Comment