Javascript 绘制svg矩形问题：无限长和闪烁

我正试着用鼠标画一幅画。当鼠标移动并按下时，它会绘制该区域，但在移动过程中，该区域会闪烁。在控制台中，当setAttribute添加width和height时，有时会出现“Infinity”，我认为这是问题所在，但我不明白为什么，因为当我注释这行

configRectSize（document.getElementById（rectId），width，height），所有数字都正确

我对绘画还有其他问题。当currentX或currentY坐标低于initX或initY时，我会更改x和y rect坐标，以便能够在其他方向（不仅从左到右，从上到下）绘制它，但有时rect会消失或更改为其他不同的坐标

你能帮我吗？这快把我逼疯了

非常感谢



var ns=”http://www.w3.org/2000/svg";
var svgId=“svgId”；
var image=document.getElementById（“PlanImage”）；
函数initSVG（SvgName，容器）{
svg=document.createElements（ns，“svg”）；
var svgId=SvgName；
setAttributeNS（null，“id”，svgId）；
container.appendChild（svg）；
返回svgId；
}
函数calculateSVGSize（SvgName，容器）{
var imageWidth=container.clientWidth；
var imageHeight=container.clientHeight；
var aspectRatio=（图像高度*100）/imageWidth；
文件
.getElementById（SvgName）
.setAttributeNS（空，“viewBox”，“0 100”+aspectRatio）；
}
函数configRectSize（矩形、宽度、高度）{
rect.setAttributeNS（空，“宽度”，宽度）；
rect.setAttributeNS（空，“高度”，高度）；
}
函数getY（rect，y）{
setAttributeNS矩形（空，“y”，y）；
}
函数getX（rect，x）{
setAttributeNS（null，“x”，x）；
}
函数配置rectcoords（rect，x，y）{
getY（rect，y）；
getX（rect，x）；
}
函数configRect（名称、宽度、高度、x、y、isBooking）{
var rect=document.getElementById（名称）；
configRectSize（矩形、宽度、高度）；
配置rectcoords（rect，x，y）；
刚毛直肠(
无效的
“填充”，
isBooking？“rgba（0265,0,3）”：“rgba（265,0,0,3）”
);
rect.onclick=函数（）{
警报（名称）；
};
}
函数createRect（SvgName，name）{
var rect=document.createElements（ns，“rect”）；
rect.id=名称；
document.getElementById（SvgName）.appendChild（rect）；
}
函数drawRect（SvgName，rectId）{
var svg=document.getElementById（SvgName）；
var rect=document.getElementById（rectId）；
var isMouseDown=错误；
var=true；
var-initX；
变异性；
var handleMouseMove=函数（e、initX、initY）{
var currentX=（e.offsetX*100）/e.target.clientWidth.toFixed（2）；
var currentY=（（e.offsetY*100）/e.target.clientHeight.toFixed（2）；
var width=Math.sqrt（Math.pow（initX-（currentX），2））.toFixed（2）；
var高度=数学sqrt（数学功率（initY-（currentY），2））.toFixed（2）；
log（`currentX:${currentX}`）；
log（`currentY:${currentY}`）；
log（`width:${width}`）；
log（`height:${height}`）；
如果（当前y
.plan包装器{
位置：相对位置；
最大宽度：500px；
}
.img计划{
宽度：100%；
}
.计划包装器.计划交互{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
宽度：100%；
z指数：10；
}
计算
x
和
y
坐标的方法是不正确的，即使是对任何DOM元素进行计算。对于
svg
元素（将句柄附加到该元素），还需要考虑坐标上的任何变换。使用
matrixTransform
和
getScreenCTM
这很简单。我在脚本中添加了一个名为
getSVGCoords
的函数，并调用它来计算初始坐标和当前坐标：


var ns=”http://www.w3.org/2000/svg";
var svgId=“svgId”；
var image=document.getElementById（“PlanImage”）；
函数initSVG（SvgName，容器）{
svg=document.createElements（ns，“svg”）；
var svgId=SvgName；
setAttributeNS（null，“id”，svgId）；
container.appendChild（svg）；
返回svgId；
}
函数calculateSVGSize（SvgName，容器）{
var imageWidth=container.clientWidth；
var imageHeight=container.clientHeight；
var aspectRatio=（图像高度*100）/imageWidth；
文件
.getElementById（SvgName）
.刚毛