update v.0.1

README.md

@@ -50,7 +50,7 @@ method will invoke a security error in IE. However, this seems to be a verified
     Assume that we want to click on the *controller* and download a corresponding file in "png" format:
 
 <pre>
-svgToPixels.hook(<i>container,target[,type[,fileName[,once[,filter[,sx[,sy]]]]]]</i>)
+svgToPixels.hook(<i>container,target[,type[,fileName[,once[,filter[,sx[,sy,[dx,[dy]]]]]]]]</i>)
 </pre>
 
 * _container_ = This is your root SVG element. It can either be a node, or an id string as in "myId" or an id string with *#* as in "#myId".
@@ -65,6 +65,8 @@ where _type_ is the previously provided/default mime type.
 * _filter_ = Specify a valid *css filter*. The chosen filter will __not__ be applied on the original SVG. Set to *false* by default. (*Important:If you are an IE, the fallback SVG only method does __not__ allow usage of css filters as the only valid filters in SVGSVGElement are the ones declared in SVG namespace.*)
 * _sx_ = X axis scale, defaults to 1.
 * _sy_ = Y axis scale, defaults to 1.
+* _dx_ = Set to 1 by default. If you want to snapshot a larger portion of an SVG (normally not necessary but there might be overflow elements in certain cases) set it to >1. Conversely, if you want a take smaller portion set it to <1. The center of the selected area is always the same with the center of parent SVG. In other words, the snapshot is always aligned middle.
+* _dy_ = Similar to dx, but controls y axis portion and centering.
 
 &nbsp;&nbsp;&nbsp;&nbsp;If you want to hook several listeners on different elements at once you can use:
 

src/svgToPixels.js

@@ -1,7 +1,7 @@
 !function () {
 	function svgToPixels() {
 		var _this_ = this;
-		this.hook = function(container,target,type,fileName,once,filter,sx,sy) {
+		this.hook = function(container,target,type,fileName,once,filter,sx,sy,dx,dy) {
 			var containerNode = registerNode(container);
 			var targetNode = registerNode(target);
 			type = type || "image/png";
@@ -10,6 +10,8 @@
 			filter = filter ? filter : "none";
 			sx = sx === undefined ? 1 : (parseFloat(sx) || 1);
 			sy = sy === undefined ? 1 : (parseFloat(sy) || 1);
+			dx = dx === undefined ? 1 : (parseFloat(dx) || 1);
+			dy = dy === undefined ? 1 : (parseFloat(dy) || 1);
 			targetNode.addEventListener("click",function svgToPixelsListener(){
 				try {
 					invokeClick();
@@ -23,7 +25,7 @@
 			function invokeClick() {
 				var dims = getDims(containerNode);
 				var cloneSVG = containerNode.cloneNode(true);
-				_this_.sel(cloneSVG).set("width",dims.width).set("height",dims.height).rm("viewBox").rm("style").styl("filter",filter);
+				_this_.sel(cloneSVG).set("width",dims.width).set("height",dims.height).set("viewBox",[dims.width*(1-dx)/2,dims.height*(1-dy)/2,dims.width*dx,dims.height*dy].join(" ")).rm("style").styl("filter",filter);
 				var canvas = document.createElement("canvas");
 				_this_.sel(canvas).set("width",dims.width*sx).set("height",dims.height*sy);
 				var context = canvas.getContext("2d");

svgToPixels.js

@@ -1,7 +1,7 @@
 !function () {
 	function svgToPixels() {
 		var _this_ = this;
-		this.hook = function(container,target,type,fileName,once,filter,sx,sy) {
+		this.hook = function(container,target,type,fileName,once,filter,sx,sy,dx,dy) {
 			var containerNode = registerNode(container);
 			var targetNode = registerNode(target);
 			type = type || "image/png";
@@ -10,6 +10,8 @@
 			filter = filter ? filter : "none";
 			sx = sx === undefined ? 1 : (parseFloat(sx) || 1);
 			sy = sy === undefined ? 1 : (parseFloat(sy) || 1);
+			dx = dx === undefined ? 1 : (parseFloat(dx) || 1);
+			dy = dy === undefined ? 1 : (parseFloat(dy) || 1);
 			targetNode.addEventListener("click",function svgToPixelsListener(){
 				try {
 					invokeClick();
@@ -23,7 +25,7 @@
 			function invokeClick() {
 				var dims = getDims(containerNode);
 				var cloneSVG = containerNode.cloneNode(true);
-				_this_.sel(cloneSVG).set("width",dims.width).set("height",dims.height).rm("viewBox").rm("style").styl("filter",filter);
+				_this_.sel(cloneSVG).set("width",dims.width).set("height",dims.height).set("viewBox",[dims.width*(1-dx)/2,dims.height*(1-dy)/2,dims.width*dx,dims.height*dy].join(" ")).rm("style").styl("filter",filter);
 				var canvas = document.createElement("canvas");
 				_this_.sel(canvas).set("width",dims.width*sx).set("height",dims.height*sy);
 				var context = canvas.getContext("2d");