Snap Docs  More SVG Dabbles  Contact Me

Creating a plugin

A Snap relative transform plugin.
When you set a transform, it will overwrite the previous transforms. Sometimes we want to keep adding onto of the previous one.
Note, you could just keep track of the different transformations and build a string up of them, but I think the addTransform method would work with odd transforms in place, ie if you've just dragged it somewhere and then want to rotate it.


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

Snap.plugin( function( Snap, Element, Paper, global ) {
	Element.prototype.addTransform = function( t ) {
		return this.transform( this.transform().localMatrix.toTransformString() + t );
	};
});

var r = s.rect(0,0,100,100).transform('t100,100')
			   .addTransform('r45,50,50')
                           .addTransform('s0.5');

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