Issue with SVG tspans not aligning with text-anchor=“end”

Answer 1

This is caused by the whitespace in your XML between the elements. If we remove that, your problem disappears.

svg {font-family:Verdana,sans-serif;color:#000;}
.key    {font-size:75%;overflow:visible;}
.caphgh {font-weight:bold;}
.keynor {font-weight:normal;}
.keysub {font-weight:normal;font-size:85%;}
.keyshf,.keyctl,.keyalt     {text-anchor:end;}
.keyshf {fill:#077BC7;} /* CIE-L*ch ( 50, 47,270)   blue    */
.keyctl {fill:#028946;} /* CIE-L*ch ( 50, 55,150)   green   */
.keyalt {fill:#ED0631;} /* CIE-L*ch ( 50, 88, 30)   red */
.yel    {fill:#CEB46C;} /* CIE-L*ch ( 74, 40, 90) */
.non    {fill:none;}
.rec    {stroke:#000;stroke-width:1;}

It may be a little unintuitive, but when you set text-anchor: end in the elements, it covers all the text up until you change the text position. That happens at the next element, when you change x and dy. So that extra space in between the spans becomes part of the previous . So your first line of text is actually:

Jump{spaces}

That's why that text appears to be shifted left by a space.

Note that the default whitespace behaviour in SVG documents is to collapse consecutive spaces down to a single space.

You don't really need to be using in your example. It would be simpler and cleaner just to use elements.

svg {font-family:Verdana,sans-serif;color:#000;}
.key    {font-size:75%;overflow:visible;}
.caphgh {font-weight:bold;}
.keynor {font-weight:normal;}
.keysub {font-weight:normal;font-size:85%;}
.keyshf,.keyctl,.keyalt     {text-anchor:end;}
.keyshf {fill:#077BC7;} /* CIE-L*ch ( 50, 47,270)   blue    */
.keyctl {fill:#028946;} /* CIE-L*ch ( 50, 55,150)   green   */
.keyalt {fill:#ED0631;} /* CIE-L*ch ( 50, 88, 30)   red */
.yel    {fill:#CEB46C;} /* CIE-L*ch ( 74, 40, 90) */
.non    {fill:none;}
.rec    {stroke:#000;stroke-width:1;}