SVGコンテナ間でのSVG要素のドラッグ/ドロップ

Question

SVG要素を1つのSVGコンテナに複製し、&を別のSVGコンテナにドラッグすることはできますか？私は先の容器にソースコンテナから要素をドロップ/ドラッグする機能を希望

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

： は、私はこのようなSVGsを設定しています。ここにはjsfiddleがあります。 hereからドラッグ&ドロップを追加しましたが、これは1つのSVGコンテナ内でのみ動作します。

Answer 1

はい。それは単純だ。最初のSVGから要素を削除するには、removeChild()を実行してください。次にappendChild()を実行して2番目のSVGに追加します。

エレメントが<svg>エレメントの直接の子でない場合は、エレメントの親グループにremoveChild()を呼び出す必要があります。つまりgroup要素がグループに含まれている場合は、その要素を返します。

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>