AngularJS-SVG拖动旋转的元素

我遇到了一个带有自己坐标空间的旋转SVG元素的问题。正常的拖放操作不起作用。例如：元素向右移动而不是向上移动，向左移动而不是向下移动。我正在寻找一个简单的解决方案，对具有不同程度设置的SVG元素使用普通拖放。

演示可以在这里看到http://jsfiddle.net/jmdajkkb/

HTML视图：

<div ng-app>
    <div ng-controller="myController">
        <svg style="height: 612px; width: 612px;" ng-mouseup="mouseUp()" ng-mousemove="mouseMove($event)">
            <rect fill="orange" width="100" height="100" ng-mousedown="elementMouseDown($event)"  ng-attr-x="{{element.x}}" ng-attr-y="{{element.y}}" ng-attr-transform="rotate({{element.rotation.degree}}, {{element.rotation.x}}, {{element.rotation.y}})" />
        </svg>
    </div> 
</div>

JavaScript:

function myController($scope) {
    $scope.element = {
                "x": 350,
                "y": 50,
                "rotation": {
                    "degree": 60,
                    "x": 50,
                    "y": 50
                }
            };
    var isDragging = false, x, y;    
    $scope.elementMouseDown = function(eventArgs){
        isDragging = true;
        x = eventArgs.clientX;
        y = eventArgs.clientY;
    };
    $scope.mouseMove = function(eventArgs) {
        if(isDragging) {
            $scope.element.x += eventArgs.clientX - x;
            $scope.element.y += eventArgs.clientY - y;
            x = eventArgs.clientX;
            y = eventArgs.clientY;
        };
    };
    $scope.mouseUp = function() {
        isDragging = false;
    };
}

顺便问一下，"拖放"逻辑应该放在控制器中还是放在指令中？

更新

是的，在转换中有额外的翻译，它是有效的。但在我的项目中，我们有一个稍微复杂一点的场景。

用户可以在运行时插入更多的元素（矩形）。他可以通过点击来选择一个元素，并使用drag&放下或旋转特征。选择的"图元"在一个单独的带有圆的组中可用。

以下是获得更好视图的新代码：http://jsfiddle.net/kjaxdf8c/