Событие drag в масштабированном svg или как поспеть за мышкой?

Question

[Иван Антонов]

Есть svg с картинкой на фоне. SVG масштабируется в зависимости от размера браузера с помощью атрибута viewBox у svg элемента. Также кроме картинки есть несколько элементов в svg на которых висит событие drag. Если масштаб меньше оригинального размера svg (указанного в viewBox) то при попытке мышкой перетащить элемент, он не поспевает за мышкой, так как перемещается относительно размеров указанных в viewBox, а не html.
Можете что-нибудь посоветовать?

Comments

[Иван Антонов]

и наверно если я начну рисовать полигоны, то точки поставленные мышкой будут не под ней, а левее или правее (в зависимости от масштаба).

[Nikolay Talanov]

А как именно вы двигаете элемент? Вы пробовали двигать с помощью трансформаций? Потому-что трансформации должны применятся относительно viewBox.

[Иван Антонов]

Nikolay Talanov: Это Snap.SVG решает, я вроде в тегах указал, а его тостер похоже удалил.

Answer 1

[GreatRash]

Конвертация координат мыши в координаты SVG:

function getCursorPosition(event, svgElement) {
  var svgPoint = svgElement.createSVGPoint();

  svgPoint.x = event.clientX;
  svgPoint.y = event.clientY;

  return svgPoint.matrixTransform(svgElement.getScreenCTM().inverse());
}

// пример использования
var svg = document.querySelector('svg');

svg.addEventListener('mousemove', function(e) {
  var cursor = getCursorPosition(e, svg);
  
  console.log(cursor);
}, false);

Comments

[Иван Антонов]

Я используя Snap.SVG решил так:

var dragStart = function (x, y, ev) {
        this.data('origTransform', this.transform().local );
    };

    var dragMove = function(dx, dy, ev, x, y) {
        var tdx, tdy;
        var snapInvMatrix = this.transform().diffMatrix.invert();

        snapInvMatrix.e = snapInvMatrix.f = 0;
        tdx = snapInvMatrix.x(dx, dy);
        tdy = snapInvMatrix.y(dx, dy);

        this.attr({ transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [ tdx, tdy ] });
    };

    polygon.drag(dragMove, dragStart);

[Иван Антонов]

материал взят отсюда svg.dabbles.info/snaptut-loadselect