如何在 Chrome 上替换已弃用的“svgElement.offsetWidth/height”答案

【问题标题】：How to replace the deprecated "svgElement.offsetWidth/height" on Chrome如何在 Chrome 上替换已弃用的“svgElement.offsetWidth/height”
【发布时间】：2016-06-04 17:48:49
【问题描述】：

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 并进行字符串解析看起来不太好。

任何答案或评论将不胜感激。

【问题讨论】：

标签： javascript html google-chrome svg

【解决方案1】：

一种方法是删除所有祖先的transform，计算客户端矩形，然后恢复祖先的变换：

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

【讨论】：