动画后删除 SVG 元素

Question

因此，对于我的作业，我有一个网页，我在其中输入一个数字并选择一个形状，所选形状的所选数字数量将出现并播放一组动画。动画结束后，我需要让形状消失。我已经尝试了所有方法，包括使用 remove() 操作，但仍然无法弄清楚这一点。

这是我的 fiddle：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 函数，它将在动画完成后删除生成的 shape/s。查看此演示 https://jsfiddle.net/o6e2yu5b/3/

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

动画后删除 SVG 元素

Remove an SVG element after animation

javascript

jquery

html

svg

raphael