Creating a plugin

Lets create a Snap.svg plugin. Might not be a lot of use yet!

var s = Snap("#svgout"); // This will use an existing svg element (not a div)

Snap.plugin( function( Snap, Element, Paper, global ) {
        Element.prototype.getCenter = function() {
                var bbox = this.getBBox();
                return [,]

var r = s.rect(0,0,100,100);
var c =,100,50);

var rcentre = r.getCenter();
console.log( rcentre );
var ccentre = c.getCenter();
console.log( ccentre );


The actual svg markup looks like this (when you've clicked on run)....