javascript - 如何在 Chrome 上替换已弃用的 "svgElement.offsetWidth/height"

Question

Chrome Platfrom宣布它将很快弃用 offsetWidth。它建议开发人员改用 getBoundingClientRect()。

但是when there is a scale , 它们是不同的。

<div id="wrap"  style="transform: scale(2); width:300;height:300;">
   <svg id="real" style="border:red 10px solid;" >
     <rect/>
   </svg>
</div>

<script>
var e = document.getElementById("real");
var rect = e.getBoundingClientRect(); 
console.log(e.offsetWidth);  //320
console.log(e.clientWidth);  //300
console.log(rect.width);     //640   
</script>      

在my another question , 我试图找到一个官方 API 来获取比例但失败了。

当有比例尺时，如何在 Chrome 上替换已弃用的“svgElement.offsetWidth/height/parent”？

我能想到的一种方法是获取边框宽度并将其添加到 clientWidth。有没有获取svg边框的api？使用 e.style.borderRightWidth 并进行字符串解析看起来不太好。

如有任何答复或评论，我们将不胜感激。

Answer 1

一种方法是移除所有祖先的转换，计算客户端矩形，然后恢复祖先的转换:

function getOffsetWidth(elm) {
  var cur, i;
  var saveTransforms = [];

  i = 0;
  cur = elm;
  //set the transform to '' for all ancestors
  while (cur) {
    if (cur.style) {
      saveTransforms[i] = cur.style.transform;
      cur.style.transform = '';
    }
    i++;
    cur = cur.parentNode;
  }
  var rect = e.getBoundingClientRect();

  i = 0;
  cur = elm;


  //restore the transform for all ancestors
  while (cur) {
    if (cur.style) {
      cur.style.transform = saveTransforms[i];
    }
    i++;
    cur = cur.parentNode;
  }


  return rect.width;
}

这里是更新的jsfiddle