单击后删除SVG元素

Question

因此，对于我的作业，我有一个网页，我在其中输入数字并选择一个形状，然后将显示选定形状的选定数量，并进行设置动画。 动画之后，形状将消失，但是在此之前，如果单击它，形状也应消失。 我尝试使用remove（）函数，但无法正确执行此操作。 请帮忙。

这是我的JavaScript：

draw = function() {
  var typed = $('#howmany').val()
  var shape = $('#shape').val()
  var SVG = $("svg");
  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)
        pattern.click(remove())
        setTimeout(function(){
      SVG.find("circle").remove();
      SVG.find("rect").remove();
      SVG.find("path").remove();
    }, 2000);
  }
}

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

这是小提琴： https : //jsfiddle.net/o6e2yu5b/3/

Answer 1

您需要将click事件绑定到该模式并将其删除。 根据您的代码，您需要使用IIFE附加事件处理程序，因此不会遇到闭包问题。

这是您可以做的。

(function(currentPattern) {
  currentPattern.node.onclick = function(){
    currentPattern.remove();
  };
})(pattern);

这是更新的jsFiddle

Answer 2

我不知道您是否需要删除所有形状或一种特定的单击形状。 如果要删除所有内容，只需在setTimeout函数之前添加此函数：

    $('body').click(function(e){
    var element = e.target.tagName;
    if (element === 'circle')
{    SVG.find(element).remove(); }
});

如果要删除特定的圆，请尝试通过ID识别每个圆，然后执行if语句删除具有单击元素ID的形状。

Answer 3

我想您需要在JS代码段中进行一些小的纠正，并且它可以工作。 只需将删除代码替换为：

pattern.click（pattern.remove）

 draw = function() { var typed = $('#howmany').val() var shape = $('#shape').val() var SVG = $("svg"); 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) pattern.click(pattern.remove) setTimeout(function(){ SVG.find("circle").remove(); SVG.find("rect").remove(); SVG.find("path").remove(); }, 2000); } } setup = function() { paper = Raphael('svg1', 400, 400) $('button').click(draw) } jQuery(document).ready(setup) 

 body { max-width: 40em; line-height: 1.6; margin: 0 auto; padding: 0.5em; color: black; font-family: "Helvetica", "Arial", sans-serif; } h1, h2, h3 { line-height: 1.2; color: black; } @media print { body { line-height: 1.4; } } svg { border: thin solid black; } input { width: 2em; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <main> <h1>Assignment 4 : Zap-em</h1> <p>Difficulty: <input type="text" id="howmany" /> </p> <p> Shape: <select id="shape"> <option value="a">Circle</option> <option value="b">Square</option> <option value="c">Triangle</option> </select> </p> <button id="btn">Start</button> <div id="svg1"></div> </main> 

更新小提琴这里 。 了解有关单击和删除的更多信息。