svg getBoundingClientRect（）＆＃x2B;变换：rotate（）＆quot;以非常特定的方式在铬中被漏洞

Question

getBoundingClientRect（）在所有SVG元素上都可以正常工作，除非在Chrome中旋转元素时。

在下面我绘制了2条线，左侧的一条是对角线，右线逐渐启动，如黑线所示。绿色框是getBoundingClientRect（）的视觉表示。然后，我将相同的转换旋转同时旋转，然后更新边界框的视觉框架。

从以下内容中可以看到，左边界框并不能表示实际的界限，但是，右边界框确实是。

问题是我需要该行的真实客户端界限，无论其方向是什么。这在Firefox中正常工作。有人知道当行具有变换旋转时，是否知道其他方法来获取或计算界限？

我在此处发布了此副本： getBoundingClientRect（） ）“在Chrome中被漏洞吗？。为了帮助有类似问题的人，但随后决定我实际上问社区。

Chrome：V100.0.4896.75

此错误现已在此处报告给Cromium Bugs委员会： https://bugs.chromium.org/p/chromium/issues/detail?id=1314959

更新：我添加了相同的2个静态线transform旋转的属性为40兆，而2 div表示“ getBoundingClientRect”。左框显然没有显示包含整个元素的最小矩形。

更新2 包括bbox blue的Visual>。 getBbox（）在任何旋转转换之前，只需计算儿童相对于SVG元素本身的界限。 getBoundingClientRect确实正确计算了转换，但是正在使用bbox，它在此处具有自己的问题：

let l = [1,2,3,4,5,6].map(d => document.getElementById(`line${d}`)),
  vis = [1,2,3,4,5,6].map(d => document.createElement(`div${d}`)),
  bboxvis = [1,2,3,4,5,6].map(d => document.createElement(`div${d}`)),
  r = 0;

vis.map((element) => {
  document.body.appendChild(element)
  element.style.position = "absolute"
  element.style.border = "1px solid green"
  element.style.background = `#0FF0002e`
})
bboxvis.map((element) => {
  document.body.appendChild(element)
  element.style.position = "absolute"
  element.style.border = "1px solid blue"
  element.style.background = `#0000FF2e`
})

let updateBounds = (element, displayElement, bboxvisEl) => { 
  let rect = element.getBoundingClientRect(),
    svgBounds = element.parentElement.getBoundingClientRect(),
    bbox = element.getBBox(),
    d = document.documentElement;
  displayElement.style.top = rect.y+d.scrollTop+"px"
  displayElement.style.left = rect.x+d.scrollLeft+"px"
  displayElement.style.width = rect.width+"px"
  displayElement.style.height = rect.height+"px"
  bboxvisEl.style.top = bbox.y+svgBounds.y+d.scrollTop + "px"
  bboxvisEl.style.left = bbox.x+svgBounds.x+d.scrollLeft +"px"
  bboxvisEl.style.width = bbox.width+"px"
  bboxvisEl.style.height = bbox.height+"px"
}

[3,4,5].forEach(i => {
    updateBounds(l[i], vis[i], bboxvis[i]);
  bboxvis[i].style.transform = `rotate(40deg)`;
})

setInterval(() => { 
  [0,1,2].forEach(i => {
    l[i].setAttribute("transform", `rotate(${r} 80 80)`);
    bboxvis[i].style.transform = `rotate(${r}deg)`;
    updateBounds(l[i], vis[i], bboxvis[i]);
  })
  r++; 
  if(r===360) r=0;
}, 20)

.container {
  width:140px;
  height:140px;
  display:inline-block;
}

<svg xmlns="http://www.w3.org/2000/svg" class="container">
  <line x1="40" y1="40" x2="120" y2="120" stroke="black" stroke-width="2"></line>
  <line x1="40" y1="40" x2="120" y2="120" id="line1" stroke="red" stroke-width="2"></line>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" class="container">
  <line x1="80" y1="30" x2="80" y2="130" stroke="black" stroke-width="2"></line>
  <line x1="80" y1="30" x2="80" y2="130" id="line2" stroke="red" stroke-width="2"></line>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="container">
  <line x1="60" y1="30" x2="100" y2="130" stroke="black" stroke-width="2"></line>
  <line x1="60" y1="30" x2="100" y2="130" id="line3" stroke="red" stroke-width="2"></line>
</svg>
<br/>

<svg xmlns="http://www.w3.org/2000/svg" class="container">
  <line x1="40" y1="40" x2="120" y2="120" id="line4" stroke="red" stroke-width="2" transform="rotate(40 80 80)"></line>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" class="container">
  <line x1="80" y1="30" x2="80" y2="130" id="line5" stroke="red" stroke-width="2" transform="rotate(40 80 80)"></line>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="container">
  <line x1="60" y1="30" x2="100" y2="130" id="line6" stroke="red" stroke-width="2" transform="rotate(40 80 80)"></line>
</svg>