Raphael Rect & Text not aligning

Question

I'm having a strange problem that I'm just baffled by.

I am using Raphael to draw rectangles and text.

I'd like to have my text right next to my rectangles, like a legend.

I know I am drawing the rect and text at the same height, but it's just not showing up that way!

Here is my code so far, and some examples of what I mean:

var xPos = ...
var yPos = ...
var squareWidth = ...
var squareHeight = ...
var iconname = ...
var iconvalue = ...

console.log("Drawing color rect for '"+iconname+"' at "+xPos+", "+yPos);
this.colorsLegendPaper.rect(xPos, yPos, squareWidth, squareHeight, 4)
        .attr({stroke:iconvalue, "stroke-width": 4});

//move slightly to the right:
xPos=xPos+squareWidth+5; 
//If I have a rect starting at (0,0) with height 3, 
//text needs to start at (0,1.5) to be aligned.
yPos=yPos+(squareHeight/2); 

console.log("Drawing color text for '"+iconname+"' at "+xPos+", "+yPos);
this.colorsLegendPaper.text(yPos, yPos, iconname)
        .attr({"font-size":12, "text-anchor":"start"});

The console output I am getting is this (which is what I am expecting):

Drawing color rect for 'Test 1' at 5, 1      //These line up great  v
Drawing color text for 'Test 1' at 30, 11
Drawing color rect for 'Test 2' at 150, 1
Drawing color text for 'Test 2' at 175, 11
Drawing color rect for 'Test 3' at 5, 31     //These do not    v
Drawing color text for 'Test 3' at 30, 41
Drawing color rect for 'Test 4' at 150, 31
Drawing color text for 'Test 4' at 175, 41 

Looks great! But... this is what it really looks like:

What happened? Why are the "31" and "41" elements displaying more like "31" and "81"?

The "1" and "11" elements look great, but when I go down to the next level, something messes up.

Here is the full source of the svg:

<svg style="overflow: hidden; position: relative; " height="115" version="1.1" width="300" xmlns="http://www.w3.org/2000/svg">
<desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); ">Created with Raphaël 2.1.2</desc>
<defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); "></defs>

<rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " x="5" y="1" width="20" height="20" r="4" rx="4" ry="4" fill="none" stroke="#4db85f" stroke-width="4"></rect>
<text style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial; " x="30" y="11" text-anchor="start" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" font-size="12px">
<tspan style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " dy="11">Test 1</tspan></text>

<rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " x="150" y="1" width="20" height="20" r="4" rx="4" ry="4" fill="none" stroke="#ff0000" stroke-width="4"></rect>
<text style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial; " x="175" y="11" text-anchor="start" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" font-size="12px">
<tspan style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " dy="11">Test 2</tspan></text>

<rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " x="5" y="31" width="20" height="20" r="4" rx="4" ry="4" fill="none" stroke="#ffff00" stroke-width="4"></rect>
<text style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial; " x="30" y="41" text-anchor="start" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" font-size="12px">
<tspan style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " dy="41">Test 3</tspan></text>

<rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " x="150" y="31" width="20" height="20" r="4" rx="4" ry="4" fill="none" stroke="#0000ff" stroke-width="4"></rect>
<text style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-family: Arial; " x="175" y="41" text-anchor="start" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" font-size="12px">
<tspan style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " dy="41">Test 4</tspan></text></svg>

This happens on all my pages :(

It gets worse if I have multiple "papers" on the page

Any ideas?

Answer 1

The problem was that I was doing $("#myDiv").hide(), and at the time of drawing the text, the div was not "connected" to the DOM, so Raphael couldn't get the height of the element. Or, from @qbolec :

I had similar issue, when using raphael + Backbone. I found this issue on git hub illuminating. The rootcause in my case is that I am operating on a view which is not attached to DOM at the moment I use Paper.text. As explained in the issue, this causes Raphael to believe that the bounding box has no height. Combined with answer of Matt Esch, this results in adjusting dy to be equal to y. As a workaround you could try to attach the element to the DOM for a moment of drawing.

The github article that helped was: https://github.com/DmitryBaranovskiy/raphael/issues/491