Javascript 通过编程更改rec位置和宽度

我有下面的代码，它在

svg

元素中绘制

rec

：

.container
{
显示器：flex；
对齐项目：居中；
高度：1.3em；
}

发件人：
致：

const svgRect=document.querySelector（'svg rect'））
函数xStart（XS）{
svgRect.setAttribute（'x'，XS）
}
函数rWidth（RW）{
svgRect.setAttribute（'width'，RW）
}

.container
{
显示器：flex；
对齐项目：居中；
高度：1.3em；
}

发件人：
致：

var startX=100；
var-startY=100；
函数init（）{
捕捉（“#rect”）。拖动（拖动移动、拖动开始、拖动）；
}
函数dragStart（x、y、evt）{
//找出圆圈当前所在的位置
startX=parseInt（Snap（#rect”）.attr（“x”），10；
startY=parseInt（Snap（#rect”）.attr（“y”），0；
}
函数拖动（dx、dy、x、y、evt）{
Snap（“#rect”）.attr({
x:（startX+dx），
y:（startY+dy）
});
}
功能绘图（evt）{
//无需采取任何行动
}

.container{
显示器：flex；
对齐项目：居中；
高度：1.3em；
位置：相对位置；
}
svg{
位置：绝对位置；
排名：0；
左：420px；
}

发件人：
致：

谢谢，太好了，有没有办法拖动rec进行x点更改，并拖动rec的右端以更改其长度？我通过添加问题第二部分的答案更新了您的答案，现在如何将这两个步骤合并在一起？您可以使用名为“snap.svg”的库使其可拖动，我已经使用这个库添加了另一个答案，您可以搜索它以获取更多信息