$(document).ready(function(){

​

var paper=Raphael("no-offset",800,80);

var path = paper.path("M 0,0 50,0 25,35z");

path.attr("fill","url(http://static.jsbin.com/images/favicon.png)");

​

// make fill relative

path.patternTmp = path.pattern;

delete path.pattern;

​

​

​

var paper2=Raphael("offset",800,80);

var path2 = paper2.path("M -25,-5 M 0,0 50,0 25,35z");

path2.attr("fill","url(http://static.jsbin.com/images/favicon.png)");

​

// make fill relative

path2.patternTmp = path2.pattern;

delete path2.pattern;

​

// make paths draggable to demonstrate offset in motion

var move = function(dx,dy){

        //console.log("Move: %f,%f", dx.toFixed(2), dy.toFixed(2) );

​

        this.translate( dx-this.ox, dy-this.oy );

​

        this.ox = dx;

        this.oy = dy;

    },

    start = function(){

        this.ox = 0;

        this.oy = 0;

    },

    end = function(){

    };

path.drag(move,start,end);

path2.drag(move,start,end);

​

});