旋转后缩放会更改rect元素的位置

Question

原始rect，轮换：
<rect id="location_1" x="40" y="40" height="100" width="100" fill="red" stroke="2" stroke-width="2" transform="rotate(45, 90, 90)"></rect>

缩放后，旋转中心会根据新的bbox进行更改：
<rect id="location_1" x="40" y="40" height="200" width="200" fill="red" stroke="2" stroke-width="2" transform="rotate(45, 140, 140)"></rect>

缩放rect后，如果我们更新旋转中心，则rect的位置会发生变化。但是如果我们不更新中心，那么它会按预期工作，直到应用其他转换。 在更新宽度和高度时进行缩放，而不是缩放变换

我的问题是如何缩放保持元素的位置相同。？

JSFiddle with the situation
如果点击Scale - No Update，则位置不会更改，但点击Scale - Update时位置会发生变化。

function scaleAndUpdate(id, update) {
  var
    elem = document.getElementById(id),
    bbox, cx, cy;
  elem.setAttribute('width', 200);
  elem.setAttribute('height', 200);
  if (update) {
    bbox = elem.getBBox();
    cx = bbox.x + (bbox.width / 2);
    cy = bbox.y + (bbox.height / 2);
    elem.setAttribute('transform', 'rotate(45, ' + cx + ', ' + cy + ')');
  }
}

function reset(id) {
  var
    elem = document.getElementById(id);
  elem.setAttribute('x', 40);
  elem.setAttribute('y', 40);
  elem.setAttribute('width', 100);
  elem.setAttribute('height', 100);
  elem.setAttribute('transform', 'rotate(45, 90, 90)');
}

<div>
  <svg x="0" y="0" width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
        <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5" />
      </pattern>
      <pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
        <rect width="100" height="100" fill="url(#smallGrid)" />
        <path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1" />
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)" style="pointer-events: none;"></rect>
    <g id="locationGroup">
      <rect id="location_1" x="40" y="40" height="100" width="100" fill="red" stroke="2" stroke-width="2" transform="rotate(45, 90, 90)"></rect>
      <circle cx="90" cy="20" r="5" fill="black"></circle>
    </g>
  </svg>
  <button onclick="scaleAndUpdate('location_1')">Scale - No Update</button>
  <button onclick="scaleAndUpdate('location_1', true)">Scale - Update</button>
  <button onclick="reset('location_1')">Reset</button>
</div>