Javascript 在SVG容器之间拖放SVG元素

是否可以在一个SVG容器中克隆SVG元素并将其拖放到另一个SVG容器中？ 我的SVG设置如下：

<svg> -source container
 <g><!-- some elements --></g>
</svg>
<svg> -destinatin container
</svg>

-源容器
-目的集装箱

我希望能够将元素从源容器拖放到目标容器中。这是。

---

我从中添加了拖放功能，但这只在一个SVG容器中起作用。

是。这很简单。只需执行

removeChild（）

即可从第一个SVG中删除元素。然后执行一个

appendChild（）

，将其添加到第二个SVG中

如果元素不是

元素的直接子元素，则需要对元素的父组调用

removeChild（）。即，组元素（如果在组中）


document.getElementById（“btn”）.addEventListener（“单击”，函数（evt）{
var rect=document.getElementById（“rect”）；
var fromSVG=rect.ownerSVGElement；
变量toId=（fromSVG.id==“source”）？“dest”：“source”；
var-toSVG=document.getElementById（toId）；
fromSVG.removeChild（rect）；
toSVG.appendChild（rect）；
});
#来源{
背景色：#ffeeee；
}
#目的地{
背景色：#eeffee；
}



单击“我”移动矩形
您必须删除原始容器中的对象并将其附加到新容器中。@RobertLongson我不想删除它，只需克隆它即可。但是，在将其从源容器中分离后，是否可以拖放并将其附加到目标容器？一旦有了引用，您就可以使用appendChild将其附加到任何需要的位置。您是否询问克隆然后附加的过程？或者您是在询问如何在页面上的两个svg之间拖动svg元素时显示它。@PaulLeBeau我说的是克隆，然后在两个svg之间附加过程