Svg Appending Text Element - Gives Me Wrong Width

i'm appending a text element to a svg via javascript. After appending i wanna set x and y coordinate, however, it returns me the wrong width of the text element when using it to ca

Solution 1:

OK, the problem seems to be that the browser doesn't calculate the correct width when using an other font. Not setting a font results in a correct width.

I solved the problem by setting the reference point ("alignment-point") to the upper right corner ot the text element by setting attributes:

capt.setAttribute("text-anchor", "end"); capt.setAttribute("alignment-baseline", "hanging");

This way i do not have to subtract the width and add the height of the element!

Solution 2:

There is a bug:http://code.google.com/p/chromium/issues/detail?id=140472

it just pre init some functions that calculates text width so you should call this function before(i'm sure that there is several extra lines that can be deleted):

fixBug = function () {
        var text = makeSVG("text", { x: 0, y: 0, fill: "#ffffff", stroke: '#ffffff'});
        text.textContent = "";
        var svg = $("svg")[0];
        svg.appendChild(text);
        var bbox = text.getBBox();
        var Twidth = bbox.width;
        var Theight = bbox.height;
        svg.removeChild(text);

    }

$("svg") - Jquery selector