拉斐尔正在添加“dy”属性

我正在使用 raphael 创建图像及其生成的 SVGfor paper.text() adds a <tspan dy="number">其中“number”是基于 Attr(font-size:n) 的数字

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

the dy值似乎也与文本相关y属性就像我舍入y重视dy值也会四舍五入到最接近的 0.5

例如：

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

使->

<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() from y_positionOfText makes

 <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" gives dy="5.5" but y="48.188976378525" gives dy="5.501476378524998"

这简直要了我的命！拉斐尔为什么要这样做以及如何做！？

每当我需要了解库如何工作时，我都会阅读源代码。现在鉴于我没有写 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 属性和文本中间位置（边界框顶部加上一半高度）之间的差异来计算的。