Question

点击它时如何删除svg？我正在使用lib snapsvg。我有plunkered我的问题。

用例如下：当用户点击svg时，我在用户点击的位置创建一个圆圈，如果用户点击已创建的圆圈，我想删除圆圈。我有一个奇怪的行为，因为圆圈被移动但没有删除。

(function() {
  var s = Snap("#svg");
  s.rect(10, 10, 400, 400);
  s.click(handleClick);

  function handleClick(event) {
    var e = event.target;
    var dim = e.getBoundingClientRect();
    var x = event.clientX - dim.left;
    var y = event.clientY - dim.top;

    var c = this.circle(x, y, 10);
    c.attr({
      fill: '#FFF'
    })

    c.click(function() {
      console.log('click circle');
      this.remove();
    });
  }

})();

Answer 1

我设法找到解决方案，元素没有移动，实际上它已被移除但是另一个被创建了。为了解决我的问题，我刚刚在c.click函数中添加了event.stopPropagation();：

c.click(function(event) {
  console.log('click circle');
  this.remove();
  event.stopPropagation();
});

如何在单击时删除snap.svg元素

1 个答案: