Problem with cross-browser curved text via Plot

I am trying to create a mark for use with Plot that displayed curved text along a path. This should be possible as SVG supports this natively. However, it would appear that text placement along a path is browser dependent. While I would expect there to be some minor differences in text-metrics across browsers, there appears to be a more significant problem with text anchoring and offset.

This results in expected behaviour in Safari (e.g. centred text in the example below), but not in Chrome (offset too far to the right). When setting the anchor to start or end placement is quite different across browsers so not really useable.

I am asking here in part because the examples I’ve seen in native SVG seem to work across browsers, and it appears the problem only appears via this Plot mark function.

Does anyone know the cause of the problem or a workable solution? Here’s a page with the implementation:

1 Like

Plot injects the following styles into the SVG which affect the placement:

.plot-d6a7b5 text,
.plot-d6a7b5 tspan {
  white-space: pre;
}

If you change your helper to not include additional whitespace around the text then the placement is correct.

Some notes:

  • You probably want fill="none" instead of “transparent”
  • I don’t think “invisible” is a valid value for stroke (I might be wrong)
  • xlink:href should no longer be necessary and can be shortened to href
  • I recommend to create a path ID via DOM.uid().id instead of hard coding it
3 Likes

Thanks on every point there. All helpful, and now behaving consistently across browsers.

2 Likes

Thanks for the help here and on the other ‘custom SVG functions’ thread. You can find my attempt at a reusable function for adding curved text to Plot specifications here:

2 Likes

Fantastic! I suggest adding a control on dominant-baseline.

1 Like

Good suggestion, thanks!. Now added :slightly_smiling_face:

This is so nice! Already in use :smiley:

1 Like

@erdirstats is absorbing and utilizing material quickly!! :rocket:

1 Like