SVG中旋转的意外行为

Question

我想用SVG创建一个可移动和可旋转的形状。我已经做到了，这是the link of the Plunker。下面的代码负责轮换：

scope.$watch('Rotation', function (newValues) {

      var rotateAngle = newValues || 0;

      newg.attr("transform","rotate(" + rotateAngle + " "+ (positionX + width / 2) +" "+ (positionY + height / 2) +")");
    });

以下情况会导致意外问题：

1. 旋转形状（例如20度）
2. 将形状移动到另一个位置
3. 更改旋转值

最后一步之后，旋转操作正常，但问题是形状的位置变为意外位置。我想保持形状的位置并旋转它而不需要任何额外的动作。

更新1

为了防止出现误解，我拍摄了一个包含该场景的视频： Check this。