I am trying to make a web page that allows the user to draw lines in an SVG image. The drawing part is fine, but each line needs to carry a label that fills the width of the line (the lines are 15px wide).

I have tried to use a `<textpath>` referencing the line they drew, but the baseline of the label ends up running down the middle of the line. [Here is a screenshot to show what I mean.](https://i.stack.imgur.com/fsvjP.png)

I have tried various ways to nudge the text over slightly using CSS and properties, but the only success I have had is to use a `transform`, which will often result in the text 'spilling out' if the direction of the line takes a sudden turn.

The other solution I have tried is to generate a second path that runs down one edge of the user-drawn path and using that for the `<textpath>`, but I'm struggling to find a way to translate the user-drawn path points into points that correspond to the rendered edge of the line.

Does anybody know a way to make either one of these methods work?