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