将一张图片拖放到 2 个 `svg` 圆圈内（来回）

Question

我正在尝试将 drag and drop 个 logo 变成 2 个 SVG circles。在我的代码的帮助下，图像被拖到一个圆圈中，但没有被拖到另一个圆圈中。

如何修改code使得图片可以dragged/dropped在2个圆之间？

function drag(ev) {
     ev.dataTransfer.setData("text", ev.target.id);
  }

  function allow(ev){
   ev.preventDefault();
  }

  function drop(ev) {
     ev.preventDefault();
     var data = ev.dataTransfer.getData("text");
     var img1=document.getElementById(data),
         imgSrc=img1.getAttribute('src'),
         imgw=img1.getAttribute('width')
         imgh=img1.getAttribute('height'),
         imgX = ev.target.getAttribute('cx') - ev.target.getAttribute('r')+20;
         console.log(imgX);
         ev.target.parentElement.innerHTML += '<image xlink:href="' + imgSrc + '" x="' + imgX + '" y="0" width="' + imgw + 'px" height="' + imgh + 'px"/>';
         img1.parentNode.removeChild(img1);

     //ev.target.appendChild(document.getElementById(data));
  }

<!DOCTYPE html>
<html>
<head>
 <title>Assignment1_HTML_L2</title>
 
</head>
<body>
   <div id="circle" ondrop="drop(event)" ondragover="allow(event)" >
 <svg width="1000" height="200">
    <circle id="c1" cx="70" cy="50" r="50" stroke="green" fill="white" stroke-width="4"  style="opacity: 1;" /> 

    <circle cx="200" cy="50" r="50" stroke="yellow"  fill="white" stroke-width="4"  style="opacity: 1;"/>
   </svg>
  </div>
  <image id="p1" src="https://media.giphy.com/media/l3vR16pONsV8cKkWk/giphy.gif" alt="picture" draggable="true" ondragstart="drag(event)" width="30" height="30" style="opacity: 1;">

</body>
</html>

更新：

在答案部分发布了 link 的 SVG 文件！！

Answer 1

HTMLdraggable/ondragstart等是HTML属性。它们在 SVG 中不起作用。因此，您需要使用标准鼠标事件来实现拖动。

参见：Drag and drop events in embedded SVG?

S.O 还有很多其他问题。与在 SVG 中实现拖动有关。

Answer 2

在保罗的帮助下，我找到了答案。确保文件扩展名应为 svg。您也可以将其包含在 html.

中

File Link

将一张图片拖放到 2 个 `svg` 圆圈内（来回）

Drag and drop one image inside 2 `svg` circles (back and forth)

html

javascript

css

svg

drag-and-drop