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

Question

我用raphael创建一个图像,它生成的SVG for paper.text()添加了一个<tspan dy="number"> "数字"是一个基于Attr的数字(字体大小:n)

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

该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()从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 属性和文本中间位置（边界框顶部加上一半高度）之间的差异来计算的。