How to draw rectangle in SVG based on mouse move event

Question

i have created SVG chart. i want to perform zooming in that chart. for zooming i need to draw rectangle i.e selection marker to select area to zoom in chart. how can i draw a rectangle in mouse move event.

1.mouse down event triggered. (start position of the marker)

2.start dragging (mouse move event triggered) -> in that event need to draw the rectangle based on the mouse move

3. drop (mouse up event triggered)-> clear the rectangle

Please refer below below screenshot.

how can i draw rectangle based on mouse move ?

Thanks,

Siva

Answer 1

here is a possible solution:

At the end of your SVG (in this way it will be drawn on all elements) add a rect like this

<rect id="zoom_area" x=0 y=0 width=0 height=0 onmouseup="endDrag(evt)" style="fill: white; stroke:black; stroke-width:2px; opacity:0.5"/>

On your grid add the events onmouseup="endDrag(evt)" and onmousemove="moveMouse(evt)"

Now the javascript:

var zoom_box = {};

function startDrag(evt){
    var offset = $("#bounds_grid").offset(); // Take the offset from the grid, change the ID as you need.
    evt.stopPropagation();
    zoom_box["start_x"] = evt.clientX-offset.left;
    zoom_box["start_y"] = evt.clientY-offset.top;
    zoom_box["boxing"] = true;
    $('#zoom_area').attr("x",zoom_box["start_x"]);
    $('#zoom_area').attr("y",zoom_box["start_y"]);
}

function endDrag(evt){
    var offset = $("#bounds_grid").offset();
    evt.stopPropagation();
    zoom_box["end_x"] = evt.clientX-offset.left;
    zoom_box["end_y"] = evt.clientY-offset.top;
    zoom_box["boxing"] = false;

    $('#zoom_area').attr("width",0);
    $('#zoom_area').attr("height",0);
}

function moveMouse(evt){
    var offset = $("#bounds_grid").offset();
    evt.stopPropagation();
    if(zoom_box["boxing"]){
        zoom_box["end_x"] = evt.clientX-offset.left;
        zoom_box["end_y"] = evt.clientY-offset.top;
        $('#zoom_area').attr("width",(zoom_box["end_x"]-zoom_box["start_x"]));
        $('#zoom_area').attr("height",(zoom_box["end_y"]-zoom_box["start_y"]));
    }
}

Be carefull with the offset: in this way it take te offset from the margin of the document