Question

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

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

我希望能够将元素从源容器拖放到目标容器中。这是jsfiddle。我在here添加了拖放功能，但这仅适用于一个SVG容器。

Answer 1

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

如果元素不是<svg>元素的直接子元素，则需要在元素的父组上调用removeChild()。 IE浏览器。 group元素，如果它在一个组中。

＆＃13;

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);
});

＆＃13;

#source {
  background-color: #ffeeee;
}

#dest {
  background-color: #eeffee;
}

＆＃13;

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

＆＃13;

在SVG容器之间拖放SVG元素

1 个答案: