Snap.svg Ziehen Sie Koordinaten in eine responsive Viewbox

Question

Herausfinden von snap.svg, und wie der Titel sagt, habe ich eine Ansicht Box, die Größe geändert wird über bootstrap's Image-responsive, die gut funktioniert, bis ich versuche, ziehen, dann die Koordinaten werden einfach verzerrt.

Codepen: http://codepen.io/k3no/pen/mWPqwm

Heres der JS-Code:

var s = Snap("#snappy"); 
    var circle = s.circle(600, 350, 100); 

    circle.attr({ 
     fill: "tomato", 
     stroke: "cornflowerblue", 
     strokeWidth: 20 
    }); 
    circle.drag(); 

Und HTML:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-12"> 
     <svg id='snappy' class='img-responsive' viewBox="0 0 1200 700"></svg>   
     </div> 
    </div> 

Answer 1

Der Standard Drag nimmt keine Transformationen oder Veränderungen in der Transformation vom Bildschirm um die Viewbox etc. zu berücksichtigen. Also eine Möglichkeit, um dies zu umgehen, ist ein Plugin zu schreiben, um damit umzugehen.

Grundsätzlich funktioniert es, indem es die dx/dy-Änderungen für die Transformation übernimmt, die sich darauf bezieht.

Example plugin in use

Snap.plugin(function(Snap, Element, Paper, global) { 

    Element.prototype.altDrag = function() { 
     this.drag(dragMove, dragStart, dragEnd); 
     return this; 
    } 

    var dragStart = function (x,y,ev) { 
     this.data('ot', 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.transform("t" + [ tdx, tdy ] + this.data('ot') ); 

    } 

    var dragEnd = function() { 
    } 
}); 

Es ist eine etwas komplexere Version here ich vorher getan haben, wenn Sie mit Dingen wie verschachtelte Transformationen am Ende, aber es ist wahrscheinlich hier für Ihr Beispiel Overkill.