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

Question

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

有人可以告诉我这个数字是如何计算的，因为我需要知道，因为我使用 toJSON() 将序列化数据发送到服务器的内容(用于 raphael 的第 3 方插件，称为 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});

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

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