<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

<b>Metrics of transformed SVG element</b><br>

<input type="button" id="notrans" value="Remove all transforms">

<input type="button" id="trans" value="Resume example transform">

<input type="button" id="random" value="Random transform">

<div id="raphael"></div>

<b><i>get_metrics()</i></b> in this jsbin example implements getting various metrics of transformed object.</b><br>

<b>newp[0] - newp[3]</b> (red dots) are transformed object's corner points

in clockwise order starting from top left corner. Red dashed lines are lines connecting these points<br>

<b>width, height</b> are width and height of transformed object (ie. no of bounding box)<br>

<b>toplen, rightlen, bottomlen, leftlen</b> are side (red dashed lines) lengths of transformed object (ie no of bounding box)<br>

<b>BBx, BBy </b> are coordinates of top left corner (blue dots) of bounding box<br>

<b>BBx2, BBy2</b> are coordinates of bottom right corner (blue dots) of bounding box<br>

<b>BBwidth, BBheight</b> are width and height of bounding box (blue dashed lines)<br>

<div id="info"></div>

​