Raphael adds the attribute 'dy'

Question

I create an image using raphael and the SVG that it generates for paper.text() , adds <tspan dy="number"> , where "number" is a number based on the Attr attribute (font-size: n)

can someone tell me how this number is calculated, how do I need to know, because I send serialized data to the server using toJSON() (a third-party raphael plugin called ElbertF / Raphael.JSON) and recreates SVG to the server always text dy="number"

The dy value also seems to be related to the text y attribute, as if I were rounding the y value, the dy value was also rounding to the nearest 0.5

for example:

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

does →

 <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> 

removing Math.round() from y_positionOfText does

  <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> 

Notice how y="48" gives dy="5.5" but y="48.188976378525" gives dy="5.501476378524998"

this is killing me! why is Raphael doing this and HOW !?

Answer 1

Whenever I need to know how the library works, I read the source code. Now, given that I did not write Raphael, I can’t say exactly why tspan is created in this way, but I can tell you how:

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

This is supposedly a fix for the binding problem. It shifts the text so that the midpoint of tspan aligns with the y attribute.

It is computed by checking the difference between the y attribute and the middle position of the text (upper bound of the limiter plus half the height).

Answer 2

I have a similar problem and I solve it by changing

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

with this:

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

Change dy: dif to dy: [0]

thanks for matt ash for sugestion

Answer 3

I had a similar problem when using raphael + Backbone. I found this problem on git hub . The root cause in my case is that I am working on a view that is not DOM bound when I use Paper.text. As explained in this question, this leads Raphael to believe that the bounding box has no height. Combined with Matt Asch's answer, this causes dy to equal y. As a workaround, you can try attaching the element to the DOM at the time of drawing.