Javascript 由于调整svg元素的大小而导致鼠标事件不匹配

我有一组

svg

元素，可以在

mousemove

事件中设置动画。如果

svg

元素为原始大小，即与

viewBox

相同，则一切正常

HTML:

代码段：

var svg=document.querySelector（“#svg logo”），
ticks=document.querySelectorAll（'.tick'），
marker=document.querySelector（“#marker”），
defPos=[0，-5，-20，-50，-20，-5,0]，
进位=[0,10,40,100,40,10,0]，
snapTheta=[0,9,18,27,18,9,0]，
calcPos=新数组（），
范围=27，
currRange=新数组（），
frag=360/刻度。长度，
偏移量=55，
i=0，
r=220，
中心=275，
posX，
波西，
慕斯，
老鼠，
logoX=svg.getBoundingClientCT（）.left，
logoY=svg.getBoundingClientRect（）.top，
雷尔西塔，
艾德谢塔，
方庭；
函数defaultPosition（）{
重置位置（）；
对于（变量i=1；i<6；i++）{
ticks[i].setAttribute（'transform'，ticks[i].getAttribute（'transform'）+'translate（0，+defPos[i-1]+'）；
}
}
函数resetPosition（）{
ficks.forEach（函数（el，u1）{
var v=el.getAttribute（'transform'）；
var reg=/\stranslate\（0\，\s？\-\d+\.？\d*\）/g；
el.setAttribute（'transform'，el.getAttribute（'transform'）.replace（reg'））
});
}
函数查找象限（x，y）{
四元组=（x>中心和y=中心和y>中心）？2：（x<中心和y>中心）？3:4；
}
函数计算器（）{
var n，
位置=新数组（）；
电流范围推送（（Absheta<范围）？360+（Absheta-范围）：（Absheta-范围））；
电流范围推送（（Absheta>（360-范围））？范围-（360-Absheta）：Absheta+范围）；
}
函数计算位置（a）{
var tickTheta，pos，diff=new Array（），difference；
calcPos=[]；
差=-（Absheta-（frag*a[3]）；
差异=（差异==-360）？0：（差异<-333）？-（360+差异）：-差异；
对于（变量i=0；icenter）？mouseX-center:（mouseX==center）？mouseX-offset-r:-（mouseX-offset-r）；
posY=（鼠标>中心）？鼠标-中心：-（鼠标-偏移-r）；
relTheta=Math.atan（posY/posX）*（180/Math.PI）；
四分法=（四分法==1）？90-relTheta:（四分法==2）？90+relTheta:（四分法==3）？180+（90-relTheta）：270+relTheta；
applyTransform（）；
});
addEventListener（'mouseleave'，function（）{
defaultPosition（）；
});
正文{
保证金：0；
}
svg{
宽度：550px；
高度：550px；
背景：#f00；
}
我看到您使用的是
Math.atan
而不是
Math.atan2
，这迫使您查找象限，并使代码复杂化

接下来是您的代码，我在其中添加了一个函数，用于检测调整大小的SVG画布上的鼠标位置。我希望这就是你需要的


var svg=document.querySelector（“#svg logo”），
ticks=document.querySelectorAll（'.tick'），
marker=document.querySelector（“#marker”），
defPos=[0，-5，-20，-50，-20，-5,0]，
进位=[0,10,40,100,40,10,0]，
snapTheta=[0,9,18,27,18,9,0]，
calcPos=新数组（），
范围=27，
currRange=新数组（），
frag=360/刻度。长度，
偏移量=55，
i=0，
r=220，
中心=275，
posX，
波西，
慕斯，
老鼠，
logoX=svg.getBoundingClientRect（）.left，
logoY=svg.getBoundingClientRect（）.top，
雷尔西塔，
艾德谢塔，
方庭；
函数defaultPosition（）{
重置位置（）；
对于（变量i=1；i<6；i++）{
ticks[i].setAttribute（'transform'，ticks[i].getAttribute（'transform'）+'translate（0，+defPos[i-1]+'）；
}
}
函数resetPosition（）{
ficks.forEach（函数（el，u1）{
var v=el.getAttribute（'transform'）；
var reg=/\stranslate\（0\，\s？\-\d+\.？\d*\）/g；
塞特岛
<svg...viewBox="0 0 550 550">...</svg>

svg {
  width: 550px;
  height: 550px;
}