Interact JS, SVG-Elemente in SVG mit Ansichtsbox ziehen?

Mein Problem, wenn ich Elemente ziehe, befindet sich das Element weit hinter dem Cursor, so dass es möglicherweise ein Verhältnisproblem darstellt?

Der Code

    interact('.element', {
        context: '.lipstick__plane'
    })
        .draggable({
            snap: {
                targets: [
                    interact.createSnapGrid({x: 10, y: 10})
                ],
                range: Infinity
            },
            inertia: true,
            restrict: {
                restriction: '#lipstick__plane__main',
                elementRect: {top: 0, left: 0, bottom: 1, right: 1},
                endOnly: true
            }
        })
        .on('dragmove', function (event) {
            $scope.$apply(function () {
                var target = event.target,
                    x = (parseFloat(target.getAttribute('x')) || 0) + ((1020 / window.outerWidth) * event.dx),
                    y = (parseFloat(target.getAttribute('y')) || 0) + ((1020 / window.outerHeight) * event.dy);

                var indx = event.target.getAttribute('data-index');

                _.set($scope.stage.elements[indx], 'meta.XCord', x);
                _.set($scope.stage.elements[indx], 'meta.YCord', y);
            });
        });

Ich tauche dort, was es näher an den Cursor gebracht hat, aber ich könnte den ganzen Tag Zahlen ausprobieren ...

My svg init block:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="1024px" height="1024px" xml:space="preserve" id="lipstick__plane__main">

Eine Sache, von der ich denke, dass sie ein Problem sein könnte, aber ich bezweifle, dass die Angular-Zusammenfassung nach einer Anforderung zum Abrufen des neuen @ erfolgx undy attribute?

Antworten auf die Frage(4)

Ihre Antwort auf die Frage