Raphael is adding a 'dy' attribute

问题

I Am creating an image with raphael and the SVG it generats for paper.text() adds a <tspan dy="number"> where "number" is a number based off the Attr(font-size:n)

can someone tell me how this number is calculated as I need to know because what I send the serialized data to the server with toJSON() (a 3rd party plugin for raphael called ElbertF / Raphael.JSON) and recreate an SVG on the server the text is always out by this dy="number"

the dy value also seems to be linked to the text's y attribute as if I round the y value the dy value also gets rounded to the nearest 0.5

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

makes ->

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

Note how the y="48" gives dy="5.5" but y="48.188976378525" gives dy="5.501476378524998"

this is killing me! why does Raphael do this and HOW!?

回答1:

Whenever I need to know how a library works, I read the source code. Now given that I didn't write Raphael I can't tell you exactly why the tspan is created like this, but I can certainly tell you how:

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

Presumably this is fixing an issue with anchoring. It's shifting the text so that the mid-point of the tspan is aligned with the y attribute.

It's computed by checking the difference between the y attribute and the middle position of the text (bounding box top plus half the height).

回答2:

I had similar issue, when using raphael + Backbone. I found this issue on git hub illuminating. The rootcause in my case is that I am operating on a view which is not attached to DOM at the moment I use Paper.text. As explained in the issue, this causes Raphael to believe that the bounding box has no height. Combined with answer of Matt Esch, this results in adjusting dy to be equal to y. As a workaround you could try to attach the element to the DOM for a moment of drawing.

回答3:

I have similar problem, and i solve it by changing

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

with this:

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

Changing dy: dif to dy: [0]

THX to Matt Esch for sugestion

来源：https://stackoverflow.com/questions/11359600/raphael-is-adding-a-dy-attribute

标签

raphael