如何在SVG中繪制可調整大小的矩形？

Question

提前致謝。

這是我的代碼，

<svg width="500px" height="500px" viewBox="0 0 200 200">
    <rect x="60" y="60" width="80" height="40" style="fill: none; stroke:     green;"/> 
</svg>

JSFIDDLE鏈接

我需要從任何位置調整此矩形的大小。 但是，與HTML DOM不同的是，並非所有元素都具有左上角x，y坐標以及圍繞內容的框的寬度和高度。 這使得不方便進行一般的調整大小或拖動過程。

如何做到這一點？ 有人可以幫我解決任何想法或解決方案！

Answer 1

檢查此內容，它將為您提供幫助。 工作

  interact('.resize-drag') .draggable({ onmove: window.dragMoveListener }) .resizable({ edges: { left: true, right: true, bottom: true, top: true } }) .on('resizemove', function (event) { var target = event.target, x = (parseFloat(target.getAttribute('data-x')) || 0), y = (parseFloat(target.getAttribute('data-y')) || 0); // update the element's style target.style.width = event.rect.width + 'px'; target.style.height = event.rect.height + 'px'; // translate when resizing from top or left edges x += event.deltaRect.left; y += event.deltaRect.top; target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px,' + y + 'px)'; target.setAttribute('data-x', x); target.setAttribute('data-y', y); target.textContent = event.rect.width + '×' + event.rect.height; }); ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// interact('.resize-drag') .draggable({ // enable inertial throwing inertia: true, // keep the element within the area of it's parent restrict: { restriction: "parent", endOnly: true, elementRect: { top: 0, left: 0, bottom: 1, right: 1 } }, // call this function on every dragmove event onmove: dragMoveListener, // call this function on every dragend event onend: function (event) { var textEl = event.target.querySelector('p'); textEl && (textEl.textContent = 'moved a distance of ' + (Math.sqrt(event.dx * event.dx + event.dy * event.dy) | 0) + 'px'); } }); function dragMoveListener(event) { var target = event.target, // keep the dragged position in the data-x/data-y attributes x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; // translate the element target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; // update the posiion attributes target.setAttribute('data-x', x); target.setAttribute('data-y', y); } window.dragMoveListener = dragMoveListener; 

  .resize-drag { background-color: #29e; color: white; font-size: 20px; font-family: sans-serif; border-radius: 8px; padding: 20px; margin: 30px 20px; width: 120px; /* This makes things *much* easier */ box-sizing: border-box; } .resize-container { width: 100%; height: 206px; } 

 <script src="http://code.interactjs.io/interact-1.2.4.min.js"></script> <svg class="resize-drag" width="500px" height="100px" viewBox="0 0 200 200"> <rect x="60" y="60" width="80" height="40" style="fill: none; stroke: green;"/> </svg> 

Answer 2

檢查此代碼....類似於您的小提琴

 interact('.resize-drag') .draggable({ onmove: window.dragMoveListener }) .resizable({ edges: { left: true, right: true, bottom: true, top: true } }) .on('resizemove', function (event) { var target = event.target, x = (parseFloat(target.getAttribute('data-x')) || 0), y = (parseFloat(target.getAttribute('data-y')) || 0); // update the element's style target.style.width = event.rect.width + 'px'; target.style.height = event.rect.height + 'px'; // translate when resizing from top or left edges x += event.deltaRect.left; y += event.deltaRect.top; target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px,' + y + 'px)'; target.setAttribute('data-x', x); target.setAttribute('data-y', y); target.textContent = event.rect.width + '×' + event.rect.height; }); ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// interact('.resize-drag') .draggable({ // enable inertial throwing inertia: true, // keep the element within the area of it's parent restrict: { restriction: "parent", endOnly: true, elementRect: { top: 0, left: 0, bottom: 1, right: 1 } }, // call this function on every dragmove event onmove: dragMoveListener, // call this function on every dragend event onend: function (event) { var textEl = event.target.querySelector('p'); textEl && (textEl.textContent = 'moved a distance of ' + (Math.sqrt(event.dx * event.dx + event.dy * event.dy) | 0) + 'px'); } }); function dragMoveListener(event) { var target = event.target, // keep the dragged position in the data-x/data-y attributes x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; // translate the element target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'; // update the posiion attributes target.setAttribute('data-x', x); target.setAttribute('data-y', y); } window.dragMoveListener = dragMoveListener; 

 .resize-drag { background-color: #29e; font-family: sans-serif; border-radius: 8px; /* This makes things *much* easier */ box-sizing: border-box; } .resize-container { width: 100%; height: 500px; } 

 <script src="http://code.interactjs.io/interact-1.2.4.min.js"></script> <svg class="resize-container" > <rect class="resize-drag" width="80" height="40" /> </svg>