Entfernen Sie ein SVG-Element beim Klicken

Question

So für meine Aufgabe habe ich eine Webseite, wo ich eine Nummer eingeben und wählen Sie eine Form und die gewählte Anzahl Menge der gewählten Form wird angezeigt und durchlaufen eine Set-Animation. Nach der Animation wird die Form verschwinden, aber zuvor sollte die Form auch verschwinden, wenn sie angeklickt wird. Ich habe versucht, die remove() -Funktion zu verwenden, kann dies aber nicht richtig machen. Bitte helfen Sie.

Hier ist mein 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) 

Hier ist die Geige: https://jsfiddle.net/o6e2yu5b/3/

Answer 1

Sie müssen das Click-Ereignis auf das Muster binden und entfernen Sie es, wenn darauf geklickt wird. Laut Ihrem Code müssen Sie einen Event-Handler mit einem IIFE anhängen, damit Sie keine Probleme mit dem Abschluss haben.

Hier ist, was Sie tun könnten.

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

Hier ist die aktualisierte jsFiddle

Answer 2

ich weiß nicht, ob Sie alle Formen entfernen müssen oder eine bestimmte Form angeklickt. Falls Sie alle entfernen möchten, fügen Sie einfach diese Funktion vor Ihrer setTimeout-Funktion:

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

, wenn Sie eine spezifische löschen möchten, versuchen Sie, jeden Kreis durch eine ID zu identifizieren, dann eine if-Anweisung, um die Form zu löschen Das hat die ID des angeklickten Elements.

Answer 3

Ich vermute, Sie brauchten eine kleine Korrektur in Ihrem JS-Schnipsel und es funktioniert. Ersetzen Sie einfach die Entferncode mit diesem:

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 = { 
 
    \t 'fill': '#BB7' 
 
    } 
 

 
    position_attr = { 
 
     'transform': 't' + x + ',' + y 
 
    } 
 
\t \t 
 
    pattern.attr(color_attr) 
 
    pattern.animate(position_attr, 2000) 
 
    pattern.click(pattern.remove) 
 
\t \t 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>

Aktualisiert Geige here. Lesen Sie mehr über click und remove.