Je bouge ▲▼►◄

<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<rect width="500" height="500" stroke="black" stroke-width="1" x="0" y="0" fill="none"/>
</svg>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.1.0/snap.svg-min.js"></script>
<script>
var s = Snap("#svg");

var orig = {
    x: 0,
    y: 0
};

var block = s.rect(0, 0, 6, 6);
block.attr({
    fill: "rgb(0, 0, 0)"
});

block.drag(


function (dx, dy, x, y, e) {
    var xSnap = Snap.snapTo(10, orig.x + dx + 3, 10);
    var ySnap = Snap.snapTo(10, orig.y + dy + 3, 10);


    this.attr({
        x: xSnap,
        y: ySnap
    });
},

function (x, y, e) {
    orig.x = e.toElement.x.baseVal.value;
    orig.y = e.toElement.y.baseVal.value;
    //origTransform = this.transform().local;
},

function (e) {
    console.log('on end');

    orig.x = e.toElement.x.baseVal.value;
    orig.y = e.toElement.y.baseVal.value;
}

);



$(document).on('keydown', function(event){
    var key = event.which;

    if( key === 37 || key === 38 || key === 39 || key === 40 ){
        event.preventDefault();
    }


    if( event.which === 37){
        //left
        orig.x -= 10;


    }

    if( event.which === 38){

        //up
         orig.y -= 10;

    }

    if( event.which === 39){
        //right

        orig.x += 10;
    }

    if( event.which === 40){
        //down

        orig.y += 10;
    }

    block.attr({
        x: orig.x,
        y: orig.y
    });

});
//# sourceURL=pen.js
</script>