如何使用 jQuery UI 使 SVG 标签图像可调整大小？答案

【问题标题】：How to make SVG tag image resizable using jQuery UI?如何使用 jQuery UI 使 SVG 标签图像可调整大小？
【发布时间】：2019-05-17 14:11:33
【问题描述】：

我在 div 中有如下标签的 SVG 图像

<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>

我正在制作的是可拖动和可调整大小的。 draggable 正在研究如何使其可调整大小，我试过但它不起作用。

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

    }

【问题讨论】：

您可以通过添加 viewBox="0 0 50 50 而不是 width="50" height="50" 来调整 SVG 的大小
@enxaneta 我试过了，但使用后我的拖放停止工作
认为您会遇到问题，因为这不会转换您的 SVG，只会调整边界框的大小。您将希望通过 resize 事件查看缩放或调整 SVG 大小。看看约束纵横比。
@SayedMohdAli 在您的示例中定义circle 在哪里？

标签： javascript jquery html jquery-ui svg

【解决方案1】：

正如我在评论中提到的，可调整大小是为 <div> 或 <span> 等盒子模型设计的。您可以在 <svg> 元素上使用它，但它会将其视为 HTML 元素。

如果你想利用它来操纵 SVG 对象的结构，你需要自己动手。

$(function() {
  function makeDragableCircle(selector, obj) {
    var height = obj.height();
    var width = obj.width();
    var objdiv = $(selector);
    var circle = $("#circle", objdiv);
    $(selector).draggable({
      containment: obj,
      drag: function(event, ui) {
        var cleft = ui.position.left * 100 / width;
        var top = ui.position.top * 100 / height;
        $(event.target).attr('data-offsetx', cleft);
        $(event.target).attr('data-offsety', top);
      }
    }).resizable({
      aspectRatio: 1.0,
      containment: obj,
      minWidth: 40,
      minHeight: 40,
      resize: function(e, ui) {
        circle.attr({
          width: ui.size.width,
          height: ui.size.height
        });
        $("circle", circle).attr({
          cx: Math.round(ui.size.width / 2) - 2,
          cy: Math.round(ui.size.height / 2) - 2,
          r: Math.round(ui.size.width / 2) - 4
        });
      }
    });
  }

  makeDragableCircle('#annotationText', $('#mainDiv'));

});

#mainDiv {
  width: 400px;
  height: 200px;
  border: 1px dashed #eee;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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>

如您所见，当您拖动时，它全部移动。当您调整大小时，我们会调整 SVG 大小并调整 <circle> 的属性。

希望对您有所帮助。

【讨论】：