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); p…

Accepted Answer

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.

Trying to retrieve Rendered Text Width in Raphael

Solution

Problem