My challenge is drawing lines between two points, although I've managed to do it once. The issue arises when I try to repeat the process; nothing happens on the second click of a circle.
Please note that this functionality only works in modern browsers
I have set up a script where clicking on circles should draw lines between them. However, I am facing an issue where the line is only drawn once and not again on subsequent clicks. Below is the code snippet:
var click = false;
var x1;
var y1;
var x2;
var y2;
$('circle').click(function () {
if (click == false) {
x1 = $(this).attr('cx')
y1 = $(this).attr('cy')
click = true;
} else {
click = false;
x2 = $(this).attr('cx');
y2 = $(this).attr('cy')
var x=$('<line x1="' + x1 + '" y1="' + y1 + '" x2="' + x2 + '" y2="' + y2 + '" stroke-width="30" stroke="green" stroke-linecap="round"/>')
$('svg').append(x)
$("body").html($("body").html());
}
})/* CSS for animation effect */
line{
transition:.5s all;
stroke-dasharray:2000;
stroke-dashoffset:2000;
-webkit-animation:move 1s forwards;
}
@-webkit-keyframes move{
100%{
stroke-dashoffset:0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<svg width="800" height="800">
/* Circle elements */
<circle cx="30" cy="30" r="30" />
<circle cx="120" cy="30" r="30" />
<circle cx="210" cy="30" r="30" />
<circle cx="300" cy="30" r="30" />
<!-- Additional circle elements -->
...
</svg>Note: This feature appears to work in the provided snippet, but not in the linked fiddle http://jsfiddle.net/akshay7/m2g6w80y/4/