在SVG容器之间拖放SVG元素

是否可以在一个SVG容器中克隆SVG元素并将其拖放到另一个SVG容器中？我有SVGs设置是这样的：在SVG容器之间拖放SVG元素

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

我想从源容器拖/放元件到目标容器的能力。这里是jsfiddle。我加了&从here中删除，但这只能在一个SVG容器内运行。

来源

2017-04-04 Nodios

你必须删除的对象在原来的容器和其附加到新的容器。 –

@RobertLongson我不想删除它，只是克隆它。但是，将它从源容器中分离后，可以将其拖放到目标容器吗？ – Nodios

一旦你有了一个引用，你可以使用appendChild将它追加到你想要的任何地方。 –

是的。很简单。只需执行removeChild()即可从第一个SVG中删除元素。然后执行appendChild()将其添加到第二个SVG。

如果元素不是<svg>元素的直接子元素，那么您需要在元素的父组上调用removeChild()。 IE浏览器。该组元素是否在组中。

document.getElementById("btn").addEventListener("click", function (evt) { 
 

 
    var rect = document.getElementById("rect"); 
 
    var fromSVG = rect.ownerSVGElement; 
 

 
    var toId = (fromSVG.id === "source") ? "dest" : "source"; 
 
    var toSVG = document.getElementById(toId); 
 

 
    fromSVG.removeChild(rect); 
 
    toSVG.appendChild(rect); 
 
});

#source { 
 
    background-color: #ffeeee; 
 
} 
 

 
#dest { 
 
    background-color: #eeffee; 
 
}

<svg id="source"> 
 
    <rect id="rect" x="100" y="50" width="50" height="40" fill="red"/> 
 
</svg> 
 

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

 
<br/> 
 

 
<button id="btn">Click me to move rectangle</button>

来源

2017-04-05 10:32:01

在SVG容器之间拖放SVG元素

回答

相关问题