I get this error " Cannot read property 'getBBox' of null " and I couldn't understand why?

Question

I am trying to scale a svg part when onmouseover and rescale to previous size onmouseout

Cannot read property 'getBBox' of null

D=document;
var lib = 'http://www.w3.org/2000/svg';
D.
function magnify(scale,x){  x.setAttribute("transform","matrix(1.5 0 0 1 0 0)");
}
function minimize(x){   x.setAttribute("transform","matrix(1 0 0 1 0 0)");
}

function getCenter(selection)
{   bbox=D.getElementById("#"+selection).getBBox();
    return[bbox.x + bbox.width/2,bbox.y + bbox.height/2];
}
function reCoor(scale, x)
{
        var coor = getCenter(x);
        var newX=x[0].width*(1-scale);
        var newY=x[1].height*(1-scale);

        var output = "matrix(" + scale + " 0 0 " + scale + " " + newX + " " + newY +")";

        return[output];
}

MyFiddle

Answer 1

You can get the bounding box of any element by calling getBoundingClientRect

var rect = document.getElementById("myElement").getBoundingClientRect();

That will return an object with left, top, width and height fields.