I am having tremendous difficulties with getting SVG Text to behave accordi

Directory Svg Component
1

I am having tremendous difficulties with getting SVG Text to behave according to dominant-baseline and text-anchor attributes.

I am trying to migrate from a in-house SVG library to the Svg component (mostly to leverage the draggable features). In the inhouse code we use dominant-baseline and text-anchor successfully, respecting the behavior exhibited by the followng sample code:

<text id=“text1” dominant-baseline=“auto” x=“0” y=“50”>Hello World</text>
<text id=“text2” dominant-baseline=“hanging” x=“100” y=“50”>Hello World</text>
<text id=“text3” dominant-baseline=“middle” x=“200” y=“50”>Hello World</text>

However, the code generated by the Svg component comes out like this:

<text id=“text1” text=“Hello World” dominant-baseline=“auto” x=“0” y=“65.20000076293945”>
<tspan dy=“0” x=“0”>Hello World</tspan>
</text><text id=“text2” text=“Hello World” dominant-baseline=“hanging” x=“100” y=“53.03999996185303”>
<tspan dy=“0” x=“100”>Hello World</tspan>
</text><text id=“text3” text=“Hello World” dominant-baseline=“middle” x=“200” y=“60.96933364868164”>
<tspan dy=“0” x=“200”>Hello World</tspan>
</text>

Notice that tspans are being added and the x-y position appear to be computed to cancel out the effect expected by the dominant-baseline.

Can someone assist to clarify to me what should be the proper use and whether or not I am misusing the dominant-baseline feature?

Also is there a way to prevent the use of tspan for single line text labels?

Thank you in advance.

2

Well, as it often happens, a solution is found after posting a question!

It appears that, in the Svg component, dominant-baseline needs to be set after the component is added to the display, followed by a svg.update(component);

My code was doing this (which failed to place the label correctly):

VgText text2 = new VgText("text2","Hello World");
text2.move(mx,my);
text2.setBaseline("hanging");  // dominant-baseline="hanging";
svg.add(text2);

The proper usage should have been:

VgText text2 = new VgText("text2","Hello World");
text2.move(mx,my);
svg.add(text2);    // Add first
text2.setBaseline("hanging");  // dominant-baseline="hanging";
svg.update(text2); // Notify of the update

Note: setBaseline is a customer attribute added by extending Svg Text component.