Raphael Rect＆amp;文字没有对齐

Question

我有一个奇怪的问题，我只是感到困惑。

我正在使用Raphael绘制矩形和文字。

我想把我的文字放在我的矩形旁边，就像传说一样。

我知道我正在绘制同样高度的矩形和文字，但它并没有以这种方式出现！

到目前为止，这是我的代码，以及我的意思的一些例子：

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"});

我得到的控制台输出就是这个（这是我期待的）：

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 

看起来很棒！但是......这就是它的真实情况：

发生什么事了？ 为什么“31”和“41”元素显示更像“31”和“81”？

“1”和“11”元素看起来很棒，但是当我进入下一个级别时，某些东西会变得混乱。

以下是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>

这发生在我的所有网页上:(

如果我在页面上有多个“论文”，情况会变得更糟

有什么想法吗？

Answer 1

问题是我正在做 $（“＃myDiv”）。hide（），并且在绘制文本时，div没有“连接”到DOM，所以拉斐尔无法获得元素的高度。或者，来自@qbolec：

  

当使用raphael + Backbone时，我有类似的问题。我发现了这个问题   在git hub照亮。在我的情况下，根本原因是我   在我使用的那一刻，在一个没有附加到DOM的视图上操作   Paper.text。正如问题中所解释的那样，这导致拉斐尔相信   边界框没有高度。结合马特的回答   Esch，这导致调整dy等于y。作为一种解决方法   你可以尝试将元素附加到DOM一会儿   图。

帮助的github文章是：https://github.com/DmitryBaranovskiy/raphael/issues/491