单击时删除 SVG 元素

Posted

技术标签:

【中文标题】单击时删除 SVG 元素【英文标题】:Remove an SVG element upon click 【发布时间】:2017-04-26 07:56:55 【问题描述】:

因此,对于我的作业,我有一个网页,我在其中输入一个数字并选择一个形状,所选形状的所选数字数量将出现并通过一组动画。动画结束后,形状会消失,但在此之前,如果单击,形状也会消失。我尝试使用 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/

【问题讨论】:

【参考方案1】:

您需要将点击事件绑定到模式并在点击时将其移除。根据您的代码,您需要使用 IIFE 附加事件处理程序,因此您不会遇到闭包问题。

这是你可以做的。

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

这是更新后的jsFiddle

【讨论】:

【参考方案2】:

我不知道您是否需要删除所有形状或一个特定的点击形状。如果您想全部删除,只需在 setTimeout 函数之前添加此函数:

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

如果要删除特定的,请尝试通过 ID 标识每个圆圈,然后使用 if 语句删除具有单击元素 ID 的形状。

【讨论】:

【参考方案3】:

我猜你需要在你的 JS sn-p 中做一个小的修正,它可以工作。只需将删除代码替换为:

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>

更新了小提琴here。 阅读更多关于 click 和 remove 的信息。

【讨论】:

以上是关于单击时删除 SVG 元素的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery 在单击时删除父元素

如何在单击时添加/删除数组中的元素?

动画后删除 SVG 元素

如何更改元素的 CSS 类并在单击时删除所有其他类

Javascript 函数未在单击时定义 SVG 元素

SVG.js,从使用“use”导入的元素中删除/读取属性“transform”