Javascript 如何使用jQuery UI使SVG标记图像的大小可调？

我有SVG图像，如下面div中的标记

<div id="MainDiv">
 <div id="annotationText">
    <svg id="circle" width="50" height="50">
  <circle cx="25" cy="25" r="20" stroke="green" stroke-width="4" fill="yellow" fill-opacity="0.0"/>
</svg>
</div>
</div>

---

正如我在评论中提到的，Resizeable是为像

或

这样的盒子模型设计的。您可以在

元素上使用它，但它会将其视为HTML元素

如果您想利用它来操纵SVG对象的结构，您需要稍微调整一下自己的结构

$（函数（）{
函数makeDragableCircle（选择器，obj）{
变量高度=对象高度（）；
变量宽度=对象宽度（）；
var objdiv=$（选择器）；
变量循环=$（“循环”，objdiv）；
$（选择器）。可拖动({
遏制：obj，
拖动：函数（事件、ui）{
var cleft=ui.position.left*100/宽度；
var top=ui.position.top*100/高度；
$（event.target）.attr（'data-offsetx'，cleft）；
$（event.target）.attr（'data-offsety'，顶部）；
}
}).可调整大小({
aspectRatio:1.0，
遏制：obj，
最小宽度：40，
身高：40，
调整大小：功能（e、ui）{
圆圈.attr({
宽度：ui.size.width，
高度：ui.size.height
});
$（“圆圈”，圆圈）.attr({
cx:Math.round（ui.size.width/2）-2，
cy：数学圆（ui.size.height/2）-2，
r：数学圆（ui.size.width/2）-4
});
}
});
}
makeDragableCircle（'annotationText'，$（'mainDiv'）；
});
#mainDiv{
宽度：400px；
高度：200px；
边框：1px虚线#eee；
}

您可以通过添加
viewBox=“0 50 50
而不是
width=“50”height=“50”，来调整SVG的大小“
@enxaneta我试过了，但在使用它之后，我的拖放停止了工作。您会遇到问题，因为这不会转换SVG，只会调整边界框的大小。您需要通过
resize
事件查看SVG的缩放或大小调整。请看约束纵横比。@SayedMohdAli，在您的示例中，
circle
定义在哪里？
makeDragableCircle('#annotationText',jQuery('#MainDiv'));




 function makeDragableCircle(selector,obj){
    var height=obj.height();
    var width=obj.width();
    var objdiv=jQuery( selector );
      jQuery( selector ).draggable({      
          containment: obj,
          drag: function( event, ui ) { 
          var cleft=ui.position.left*100/width;
          var top=ui.position.top*100/height;
          jQuery(event.target).attr('data-offsetx',cleft);
          jQuery(event.target).attr('data-offsety',top);

          }

      }).resizable({
         alsoResize: "#"+circle,
          aspectRatio: 1.0
      });

    }