如何在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 link

我需要从任何位置重新调整此矩形的大小。但与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

检查此代码....类似于你的小提琴

＆＃13;

＆＃13;

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;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;