使用jquery-ui resizable（）交互调整svg.rect元素的大小不起作用

Question

我试图使svg.rect元素可拖动并可调整大小。虽然可拖动的作品，但可调整大小不会。我甚至都没有看到UI元素上的调整大小光标。

<div id="wfPage" >
    <svg width="99%" height="2000">
        <rect class="svgRects"  x="100" y="20" width="140" height="70" /> 
    </svg>
</div>

脚本：

$(document).ready(function(){
    $('.svgRects')
        .draggable() // WORKS
            .on('drag', function(event, ui){
                event.target.setAttribute('x', ui.position.left);
                event.target.setAttribute('y', ui.position.top);
            });

    $('.svgRects')
        .resizable()  // DOES NOT WORK
            .on( 'resize', function( event, ui ) {
            event.target.setAttribute('width', ui.size.width);
            event.target.setAttribute('height', ui.size.height);
            });
});