0
我有一个奇怪的问题，我只是被困惑了。Raphael Rect＆Text not aligning
我正在使用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 "Arial"" 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 "Arial"" 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 "Arial"" 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 "Arial"" 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>
这发生在我所有的网页:(
更糟糕，如果我有网页
多“的论文”
有什么建议吗？
这里有一个想法：也许我可以尝试使用textpath的 – Kayvar
有一些有关您还没有你的样品英寸根据[Raphaël文档]（http://raphaeljs.com/reference.html#Element），'tspan'的'dy'属性。表示元素的某种平移或变换发生在Y轴上，这就解释了这种差异。 –
ALrighty，我会试试看，谢谢！ – Kayvar