I’m doing an assignment that asks for buttons that generate SVG shapes. I can get a single shape from a button by calling a Javascript function. But then it doesn’t spawn any more.

I thought they might be on top of each other, so I created increasing variables for spawn location, but that didn’t do anything.

I also need to make color/fill a variable to change it, but SVG formatting is so different in Javascript vs in the html page that I can’t get that working either.

HTML:
<button type="button" class="buttonC" onclick="circle()">Circle</button>
<button type="button" class="buttonR">Rectangle</button>
<button type="button" class="buttonL">Line</button>

<svg id="svg"></svg>

And Js:

 var x = 25;
 var y = 25;

 function circle() {
     var svg = document.getElementById('svg');
     var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
         circle.cx.baseVal.value = x+40;
         circle.cy.baseVal.value = y+40;
         circle.r.baseVal.value = 20;
     svg.appendChild(circle);
 }