拉斐尔矩形和文本未对齐

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，所以Raphael 无法获得元素的高度。或者，来自@qbolec：

我在使用 raphael + Backbone 时遇到了类似的问题。我发现了这个问题 在 git hub 上发光。就我而言，根本原因是我 在我使用的那一刻，对未附加到 DOM 的视图进行操作 纸质文本。正如问题中所解释的，这使拉斐尔相信 边界框没有高度。结合马特的回答 Esch，这导致将 dy 调整为等于 y。作为一种解决方法 您可以尝试将元素附加到 DOM 片刻 绘图。

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