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


i working in svg editor 2.7 version,here need 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 selected tool.but need select individual corner of rectangle below images

rectangle result

in svg edit files contain mousedown,mousemove , mouseup event.here used getbbox() function boundary value. need split boundary selection above image 2. here working on mouseover event getting boundary of rectangle in svg. didn't achieve it. kindly guide me or drag me 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;     } 

it ui issue, not coding.

  1. on mouseenter() <rect>, outline box using 4 <line> , overlay on <rect>`.
  2. attach mousedown() , mousemove() event listener 4 lines, can click on them , drag them around.
  3. update <rect> x, y, width , height values whenever 1 edge dragged.
  4. on mouseleave(), destroy these 4 lines , remove event listener.

this skips calculation of edge nearest mouse.

snap svg or raphaeljs can used implement ui, saves low level coding.


Comments

Popular posts from this blog

php - Submit Form Data without Reloading page -

linux - Rails running on virtual machine in Windows -

php - $params->set Array between square bracket -