如何在使用javascript动态添加组时更新SVG

Question

我正在制作一个电路生成器，我将使用SVG作为组件。我的html的结构有一个空的svg标记，缩放到全宽和全高。当从工具栏拖动到画布(屏幕(时，我的java脚本完成了添加组件(svg组(的工作。但由于某种原因，它没有显示在屏幕上。我应该更新我的svg或类似的东西来显示添加的元素吗？

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是svg组元素看起来像

<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>

id画布的元素是

<svg class="canvasSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="canvas">   
</g>    
</svg>

提前谢谢。

Answer 1

正如@Robert Longson在评论中提到的，div不能显示svg组，父svg标记是必要的。