正如我在评论中提到的,可调整大小是为像
<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>
的属性。
希望有帮助。