单击时删除 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 元素的主要内容,如果未能解决你的问题,请参考以下文章