Javascript 如何在缩放svg中计算getBoundingClientRect（）？

我有一个用例，设计师为我们提供了一个SVG，我们使用SVG中的某些元素来定位动态创建的元素

在下面的代码片段中，我尝试使用

getBoundingClientRect

将rect#overlayTarget与div#overlay重叠：它不考虑父元素的缩放，元素也不重叠

此问题的答案不适用于此处，因为它使用了SVG不可用的

元素.offsetLeft

和

元素.offsetTop

：

如何使#overlay和#overlayTarget重叠

const target=document.querySelector（“覆盖目标”）；
const position=target.getBoundingClientRect（）；
const overlay=document.querySelector（“覆盖”）；
overlay.style.top=`${position.y}px`；
overlay.style.left=`${position.x}px`；
overlay.style.width=`${position.width}px`；
overlay.style.height=`${position.height}px`
#覆盖{
位置：绝对位置；
背景：火红；
不透明度：0.3；
宽度：100px；
高度：100px；
}

试验
如果无法将覆盖元素设置在转换后的元素之外，此答案将有效，但仅适用于一些简单的转换：


翻译和
因子大于0的比例

在这些情况下，边界框的角不会移出其顶部/左侧和底部/右侧方向。旋转或倾斜，以及大多数3D变换都不起作用

然后，通过使用逆矩阵将
位置
的角变换为
#app
元素的设置，可以计算叠加的结果框值。和接口有助于实现这一点

请务必记住，
transform
设置了一个隐式的
位置：relative
，因此覆盖的
top
和
left
值与视口无关


const-app=document.querySelector（“#app”）；
const relative=app.getBoundingClientRect（）；
const target=document.querySelector（“覆盖目标”）；
const position=target.getBoundingClientRect（）；
常量矩阵=新的DOMMatrix（app.style.transform）.inverse（）；
const topleft=新的DOMPoint(
位置x-相对位置x，
position.y-relative.y
).矩阵变换（矩阵）；
const bottomright=新DOMPoint(
position.x-相对.x+position.width，
position.y-相对.y+position.height
).矩阵变换（矩阵）；
const overlay=document.querySelector（“覆盖”）；
overlay.style.top=`${topleft.y}px`；
overlay.style.left=`${topleft.x}px`；
overlay.style.width=`${bottomright.x-topleft.x}px`；
overlay.style.height=`${bottomright.y-topleft.y}px`
#覆盖{
位置：绝对位置；
背景：火红；
不透明度：0.3；
宽度：100px；
高度：100px；
}

试验
>返回的坐标是相对于当前SVG空间的坐标，那么您是否需要自己进行SVG空间到全局文档空间的转换？代码段中的问题是，转换也适用于
#overlay
元素，如果它没有，gBCR返回的值将完全匹配：您可以将覆盖从这个转换的容器中移出吗？