JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var e = document.getElementById("real");
	var rect = e.getBoundingClientRect(); // rect is dimension after scale



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

	  i = 0;
	  cur = elm;
	  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;
	  while (cur) {
	    if (cur.style) {
	      cur.style.transform = saveTransforms[i];
	    }
	    i++;
	    cur = cur.parentNode;
	  }


	  return rect.width;
	}
	console.log(e.offsetWidth);
	console.log(e.clientWidth);
	console.log(rect.width);
	console.log('*' + getOffsetWidth(e));