[英]Remove an SVG element upon click
因此,對於我的作業,我有一個網頁,我在其中輸入數字並選擇一個形狀,然后將顯示選定形狀的選定數量,並進行設置動畫。 動畫之后,形狀將消失,但是在此之前,如果單擊它,形狀也應消失。 我嘗試使用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/
您需要將click事件綁定到該模式並將其刪除。 根據您的代碼,您需要使用IIFE附加事件處理程序,因此不會遇到閉包問題。
這是您可以做的。
(function(currentPattern) {
currentPattern.node.onclick = function(){
currentPattern.remove();
};
})(pattern);
這是更新的jsFiddle
我不知道您是否需要刪除所有形狀或一種特定的單擊形狀。 如果要刪除所有內容,只需在setTimeout函數之前添加此函數:
$('body').click(function(e){
var element = e.target.tagName;
if (element === 'circle')
{ SVG.find(element).remove(); }
});
如果要刪除特定的圓,請嘗試通過ID識別每個圓,然后執行if語句刪除具有單擊元素ID的形狀。
我想您需要在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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.