Get the borders of a rotating SVG element in screen pixels?

I am trying to find a better way to get the bounding rectangle of an arbitrary SVG element in the pixels of the screen in order to properly blend the HTML element. So far, my approach has been to use .getBBox()both .getCTM()to extract the bounding box of an object and transform the matrix, and then apply the transform to the points of the bounding box, as described in the accepted answer to this question .

// get the element
var el = $(selector)[0],
    pt = $(selector).closest('svg')[0].createSVGPoint();

// get the bounding box and matrix
var bbox = el.getBBox(),
    matrix = el.getScreenCTM();

pt.x = bbox.x;
pt.y = bbox.y;
var nw = pt.matrixTransform(matrix);
pt.x += bbox.width;
pt.y += bbox.height;
var se = pt.matrixTransform(matrix);

// make a div in the screen space around the object
var $div = $('<div class="bbox"/>').css({
        left: nw.x,
        top: nw.y,
        width: se.x - nw.x,
        height: se.y - nw.y
    })
    .appendTo('body');

You can see my test here: http://jsfiddle.net/nrabinowitz/zr2jX/

, , , , , , , - , , .

?