Snap.svgレスポンシブビューボックス内の座標をドラッグ

Question

snap.svgを解説していますが、タイトルと同じように、ビューストラップはブートストラップのイメージレスポンスでサイズ変更されています。座標はちょうど歪んだものになります。

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

HERESにJSコード：

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

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

そして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

画面からの変換で任意の変換や変更をとらないデフォルトのドラッグビューボックスなどを考慮してください。だから私がこれを取り上げている一つの方法は、それに対処するためのプラグインを書くことです。

基本的には、変換に適用されるdx/dyの変更を反映して動作します。

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() { 
    } 
}); 

少し複雑なバージョンhereは、ネストされたトランスフォームのようなもので終わる場合、私は、以前に行っているが、それはここにあなたの例のため、おそらく行き過ぎだあります。