Javascript 仅在Chrome上，svg中的getBoundingClientRect不正确

在svg中调用div的

getBoundingClientRect

以相应地定位svg之外的其他元素时，

top

和

left

值仅在Chrome（78.0.3904.108）和Windows 10上过高

。绿色框周围的红色边框使用svg中元素的坐标定位。在Windows Chrome上，您将看到

顶部

和

左侧

值以某种方式膨胀的结果（下面的第一个屏幕截图）。在其他浏览器中，它的行为与预期一致（第二个屏幕截图）。有没有更好的方法来实现这一点，或者为什么这个问题只出现在Windows Chrome中

更新：添加代码段

const svg=document.querySelector（'.svg'）；
const ref=document.querySelector（'.ref'）；
const outer=document.querySelector（'.outer'）；
const reflect=ref.getBoundingClientRect（）；
log（'.svg BoundingClientRect'，svg.getBoundingClientRect（））；
console.log（'.ref BoundingClientRect'，refRect）；
$（外部）.css（'top'，refRect.top-window.scrollY）
$（外部）.css（'left'，refRect.left-window.scrollX）

svg{
位置：绝对位置；
排名：0；
左：0；
宽度：200px；
高度：200px；
}
参考号{
背景:#中交会;；
宽度：100%；
身高：100%；
}
.外部{
边框：1px纯红；
宽度：100px；
高度：100px；
位置：固定；
}

应该用红色边框将其完全包围

什么版本？在我的chrome（也包括windows和最新版本）windows 10 Home 1809上似乎没有问题。请包含在堆栈溢出上重现此问题所需的所有代码。请注意，您可以使用（编辑器中的图标上有

）。然后人们可以在堆栈溢出上尝试它。