jQuery resizable - alsoresize rect in svg through outer div control

Question

HTML:

<svg width="400" height="110" 
     style="background:red">
 <rect id="rectangle" width="300" height="100" 
   style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
 </svg>

 <div id="firstDiv" 
      style="width:100px;height:100px; background:green">
  </div>

jQuery:

 jQuery('#firstDiv').resizable({
        handles: 'se',
        animate: true,
        alsoResize: '#rectangle',
    })

With this sample, The rect inside svg always starting from x=0, y=0 when we resize firstDiv.

Rect has to start from where it was its last starting/ending position not from zero

jquery ui version : jQuery UI - v1.12.1

Answer 1

In our resizable method add following code

jQuery('#firstDiv').resizable({
        handles: 'se',
        animate: true,
        alsoResize: '#rectangle',    
        resize: function (event, ui) {
           document.querySelector('#rectangle').style.width = ui.size.width;
           document.querySelector('#rectangle').style.height = ui.size.height;
        }
   });

Now everything works fine