javascriptjqueryhtmlsvgsvg-edit

How to get boundary value of rect tag in svg using javascript

I am working in svg editor 2.7 version,Here i need to selected individual boundary value of rectangle in svg using javascript.

<svg width="9000" height="100" style="border:1px solid black">
<rect x="9000" y="0" height="100" width="200"></rect>
</svg>

RECTANGLE ORIGINAL

My rectangle getting this selected tool.But i need to select individual corner of rectangle as below images

RECTANGLE RESULT

In svg edit files contain mousedown,mousemove and mouseup event.Here i used GETBBOX() function to get boundary value. but i need to split boundary for selection like above image 2. Here am working on mouseover event for getting boundary of rectangle in svg. but i didn't achieve it. kindly guide me for this or drag me into right way. 

var mouseOver = function(evt) {
        evt.preventDefault();
        var root_sctm = $('#svgcontent g')[0].getScreenCTM().inverse();
        var pt = svgedit.math.transformPoint( evt.pageX, evt.pageY, root_sctm ),
        mouse_x = pt.x * current_zoom,
        mouse_y = pt.y * current_zoom;
        var x = mouse_x / current_zoom,
        y = mouse_y / current_zoom,
        mouse_target = getMouseTarget(evt);
        mouse_target =selectedElements[0];
    switch (current_mode) {

            case 'rect':
                var test =selectedElements[0].getBBox();
                console.log(test);
            break;
    }
Solution

  • It is an UI issue, not coding.

    1. On mouseenter() <rect>, outline the box using 4 <line> and overlay it over the <rect>`.
    2. Attach mousedown() and mousemove() event listener to all 4 lines, so you can actually click on them and drag them around.
    3. Update the <rect> x, y, width AND height values whenever one edge is dragged.
    4. On mouseleave(), destroy these 4 lines and remove the event listener.

    This skips the calculation of which edge is nearest to mouse.

    Snap SVG or RaphaelJS can be used to implement this UI, saves you some low level coding.