jQuery 可调整大小 - 也可通过外部 div 控件调整 svg 中的矩形

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',
    })

对于这个示例，svg 中的 rect 在我们调整 大小时总是从 x=0，y=0 开始]firstDiv.

Rect 必须从它的最后一个 starting/ending 位置开始，而不是从零开始

jquery ui 版本：jQuery UI - v1.12.1

Answer 1

在我们的可调整大小方法中添加以下代码

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;
        }
   });

现在一切正常

jQuery 可调整大小 - 也可通过外部 div 控件调整 svg 中的矩形

jQuery resizable - alsoresize rect in svg through outer div control

jquery-ui

resizable

jquery-ui-resizable