How to draw a resizeable rectangle in SVG?

Question

Thanks in advance.

Here is my code,

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

I need to re-size this rectangle from any location. But unlike HTML DOM, not all elements have an upper left hand corner x,y coordinate and a width and height for a box surrounding the content. This makes it inconvenient to make a generic resize or drag procedure.

how to achieve this? Could someone help me with any idea's or solution's!

Answer 1

check this, It will help you. WORKING

  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

check this code .... Similar to ur fiddle

 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>