Problem with cross-browser curved text via Plot

Community Help
1

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.

curvedText
curvedText1305Ɨ519 73.4 KB

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
2

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
3

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

2 Likes
4

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
5

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

1 Like
6

Good suggestion, thanks!. Now added :slightly_smiling_face:

7

This is so nice! Already in use :smiley:

3 Likes
8

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

1 Like