动画后删除SVG元素

Question

因此，对于我的作业，我有一个网页，我在其中输入数字并选择一个形状，然后将显示选定形状的选定数量，并进行设置动画。 动画之后，我需要使形状消失。 我已经尝试了一切，包括使用remove（）动作，但仍然无法弄清楚这一点。

所以这是我的小提琴： https : //jsfiddle.net/o6e2yu5b/2/

这是JavaScript代码：

draw = function() {
  var typed = $('#howmany').val()
  var shape = $('#shape').val()
  var x, y;

  for (var i = 0; i < typed; i++) {
    x = Math.random() * 350
    y = Math.random() * 350
    if (shape == 'a') {
      pattern = paper.circle(25, 25, 25)
    }
    if (shape == 'b') {
      pattern = paper.rect(10, 10, 50, 50)
    }
    if (shape == 'c') {
      pattern = paper.path('M25,0 L50,50, L0,50 Z')
    }

    color_attr = {
        'fill': '#BB7'
    }

    position_attr = {
      'transform': 't' + x + ',' + y
    }

    pattern.attr(color_attr)
    pattern.animate(position_attr, 2000)
        onComplete:function() {
        this.target.remove();
    }
  }
}

setup = function() {
  paper = Raphael('svg1', 400, 400)
  $('button').click(draw)
}
jQuery(document).ready(setup)

请帮忙！ 谢谢

Answer 1

看来您的onComplete函数不正确，无法正常工作。 因此，我创建了一个新的setTimeout函数，该函数将在动画完成后删除生成的形状。 查看此演示https://jsfiddle.net/o6e2yu5b/3/

setTimeout(function(){
  SVG.find("circle").remove();
  SVG.find("rect").remove();
  SVG.find("path").remove();
}, 2000);