Trying to retrieve Rendered Text Width in Raphael

Question

So I am looking to retrieve the size of a text string in Raphael and I can't seem to do it. Although the documentation says that

.attr('width');

is an option...and I can't set the width either.

Here is a FIDDLE

This is what I have been trying...plus other crude ways (even using Jquery)

var page = Raphael("drawing_board");

    // start, move, and up are the drag functions
    start = function () {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.attr({opacity: .5});
        console.log( this.attr('width') ); //THIS IS WHERE I AM TRYING TO GET THE WIDTH
    },
    move = function (dx, dy) {
        // move will be called with dx and dy

            nowX = Math.min(600, this.ox + dx);
            nowY = Math.min(400, this.oy + dy);
            nowX = Math.max(0, nowX);
            nowY = Math.max(0, nowY);
            this.attr({x: nowX, y: nowY });

    },
    up = function () {
        // restoring state
        this.attr({opacity: 1});

    };   

    page.text(200, 50, "TEXT 1").attr({ cursor: "move", 'font-size': 16  , fill: '#3D6AA2'}).drag(move, start, up);
    page.text(200, 200, "TEXT 2").attr({ cursor: "move", 'font-size': 16  , fill: '#3D6AA2'}).drag(move, start, up);

Maybe I need to use something other than

this.attr('width' : 30); //To Set
this.attr('width'); //To Get

Answer 1

You can use:

this.node.getBBox().width

this.node -> gets the SVG element associated with the Raphael element
getBBox() -> bounding box

You can also use Raphael's getBBox method directly:

this.getBBox().width

Your approach doesn't work because the svg text element doesn't have a width attribute.