I am making a circuit builder, I am going to use SVG for the components. The structure of my html has a empty svg tag scaled to full width and height. My java script does the job of adding the components (svg groups) when dragged from the toolbar into the canvas (screen). But for some reason it is not displaying on the screen. Should i update my svg or something similar to show the added elements?
function drop (e){
e.preventDefault();
const id = e.dataTransfer.getData("text");
const el = document.getElementById(id);
const dupEl = el.cloneNode(true);
dupEl.id = id+String(idCount);
idCount+=1;
document.getElementById("canvas").appendChild(dupEl);}
el is the svg group element it looks like
<g id ="gen">
<circle cx="90.327" cy="30.277" r="30" style="fill:none;stroke-width:2;stroke:#000"/>
<path d="m120.33 30.277h59.95" style="fill:none;stroke-width:2;stroke:#000"/>
<path d="m60.327 30.277h-60.05" style="fill:none;stroke-width:2;stroke:#000"/>
<text transform="matrix(1.7791 0 0 1.7791 -68.406 -26.148)" style="fill:#000000;font-family:sans-serif;font-size:10.583px;line-height:1.25;shape-inside:url(#rect1053);white-space:pre" xml:space="preserve"><tspan x="80.222656" y="39.933093"><tspan style="font-family:sans-serif;font-size:22.578px;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:bold">G</tspan></tspan></text>
</g>
The element with the id canvas is
<svg class="canvasSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="canvas">
</g>
</svg>
Thanks in advance.
As @Robert Longson mentioned in the comments, a div cannot display svg groups, a parent svg tag is necessary.