SVG getBoundingClientRect() + “transform:rotate()”在 Chrome 中以一种非常具体的方式出现错误

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>