Question

我正在用raphael创建一个图像，它生成的SVG for paper.text()添加了<tspan dy="number">，其中“number”是一个基于Attr的数字（font-size：n）

有人可以告诉我这个数字是如何计算的，因为我需要知道这是因为我使用toJSON()（raphael的第三方插件名为ElbertF / Raphael.JSON）将序列化数据发送到服务器并重新创建服务器上的SVG文本总是由dy="number"

输出

dy值似乎也与文本的y属性相关联，就好像我对y值进行舍入，dy值也会四舍五入到最接近的0.5 < / p>

所以例如：

textEmement = paper.text(Math.round(x_positionOfText),
                                                    Math.round(y_positionOfText));
textEmement.attr({ "font": "",
                   "fill": fontColour,
                   "font-family": "Arial",
                   "text-anchor": "middle",
                   "font-size": 17});

make - ＆gt;

<text style="text-anchor: middle; font-family: Arial; font-size: 17px;" x="161" y="48" text-anchor="middle" font="" stroke="none" fill="#ffffff" font-family="Arial" font-size="17px">
<tspan dy="5.5">Text 3</tspan>
 </text>

从Math.round()中删除y_positionOfText会使

 <text style="text-anchor: middle; font-family: Arial; font-size: 17px;" x="161" y="48.188976378525" text-anchor="middle" font="" stroke="none" fill="#ffffff" font-family="Arial" font-size="17px">
 <tspan dy="5.501476378524998">Text 3</tspan>
 </text>

注意y="48"给出dy="5.5"的方式但y="48.188976378525"给出了dy="5.501476378524998"

这是杀了我的！拉斐尔为什么要这样做以及如何做？？

Answer 1

每当我需要知道库是如何工作的时候，我都会阅读源代码。既然我没有写Raphael，我无法告诉你为什么tspan是这样创建的，但我当然可以告诉你如何：

var bb = el._getBBox(),
    dif = a.y - (bb.y + bb.height / 2);
dif && R.is(dif, "finite") && $(tspans[0], {dy: dif});

据推测，这正在解决锚定问题。它正在移动文本，以便tspan的中点与y属性对齐。

通过检查y属性和文本中间位置之间的差异来计算（边界框顶部加上高度的一半）。

Answer 2

当使用raphael + Backbone时，我有类似的问题。我发现这个issue on git hub很有启发性。在我的情况下，根本原因是我在使用Paper.text时正在操作一个没有附加到DOM的视图。正如问题中所解释的那样，这导致拉斐尔认为边界框没有高度。结合Matt Esch的答案，这导致调整dy等于y。作为一种解决方法，您可以尝试将元素附加到DOM以进行绘制。

Answer 3

我有类似的问题，我通过改变

来解决它

var bb = el._getBBox(),
    dif = a.y - (bb.y + bb.height / 2);
dif && R.is(dif, "finite") && $(tspans[0], {dy: dif});

用这个：

var bb = el._getBBox(),
    dif = a.y - (bb.y + bb.height / 2);
dif && R.is(dif, "finite") && $(tspans[0], {dy: [0]});

将 dy：dif 更改为 dy：[0]

THX对Matt Esch的消化

拉斐尔正在添加'dy'属性

3 个答案: