Javascript 创建可通过从角落拖动来调整大小的svg元素

我正在创建一个网站与一个团队的人，允许用户绘制不同类型的图表。我目前正在开发工作分解树（WBT）图表，但svg元素有问题

我希望能够允许用户通过从角落拖动形状来调整画布上元素的大小

我已经在网上搜索了几个小时，寻找一个合适的解决方案，但似乎什么也找不到

谁能帮我一下吗

---

谢谢

好的，这是我提出的代码，它不是最好的，但它将帮助您了解我们如何“调整大小”

杰弗里德尔来了

我的html代码是：-

 <div style="border: 2px solid;width: 800px;">
        <svg id="mycanvas" width="800px" height="500px" version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
        <rect id="myrect" fill="black" x="100" y="70" width="100" height="100" />

        <rect id="resize" fill="red" x="190" y="160" width="20" height="20" />
        </svg>
    </div>

---

请让我们看看。您没有提供太多的细节和示例代码。但我们假设svg中有一个矩形。现在需要绑定3个鼠标事件mousedown、mouseup和mousemove。在mousemove中更改矩形尺寸。（一旦我可以访问我的电脑，我将提供代码示例。）

document.addEventListener('mousedown', mousedown, false);

        var mousedown_points;
        function mousedown(e) {

            var target = e.target;
            if (target.id === 'resize') {
                mousedown_points = {
                    x: e.clientX,
                    y: e.clientY
                }
                document.addEventListener('mouseup', mouseup, false);
                document.addEventListener('mousemove', mousemove, false);
            }
        }

        function mousemove(e) {
            var current_points = {
                x: e.clientX,
                y: e.clientY
            }

            var rect= document.getElementById('myrect');
            var w=parseFloat(rect.getAttribute('width'));
            var h=parseFloat(rect.getAttribute('height'));

            var dx=current_points.x-mousedown_points.x;
            var dy=current_points.y-mousedown_points.y;

            w+=dx;
            h+=dy;

            rect.setAttribute('width',w);
            rect.setAttribute('height',h);

            mousedown_points=current_points;

            updateResizeIcon(dx,dy);
        }

        function updateResizeIcon(dx,dy){
            var resize= document.getElementById('resize');
            var x=parseFloat(resize.getAttribute('x'));
            var y=parseFloat(resize.getAttribute('y'));

            x+=dx;
            y+=dy;

            resize.setAttribute('x',x);
            resize.setAttribute('y',y);
        }


        function mouseup(e) {
            document.removeEventListener('mouseup', mouseup, false);
            document.removeEventListener('mousemove', mousemove, false);
        }