I'm pretty new to SVG and struggling on some parts.
I don't know how to center around a text path properly.
To make it embrace the curved path, with dynamic length text (can be 5 letters or 25).
I took @sdrasner workshop which was really helpful to gather some things quickly !
There are some cool things that I gathered on SVG Text Layout by Kurt Cagle blog post suggesting to use inlineSize.
More Robust SVG Text was another resource, then I've tried startOffset="50%" text-anchor="middle"
But none of them were giving me exactly what I wanted because the most important thing here is the width of the SVG text.
Sarah talked (video #45) about a way of doing it with `stroke-dashoffset: -274` and with something like `document.querySelector('svg path').getTotalLength()` but I do not get how the 2 can work in my case.
The closest thing that I've achieved is this: TextPathAttributes, in pair with some ugly `tspan` as shown in my codepen...
Yep, you guessed it, at that point I'm totally lost on what to try and I have to admit that the official documentation is pretty hard to get a grip on (too much things that I may not need ever)...
So, to sum up my mess above, I want to:
- get a centered text with something around 80/90% of the total arc width
- wrap a longer sentence on 2 lines (the height static on the arc can stay static ofc)
- still keep it responsive on desktop/mobile (should be ok since it's SVG)
- as my draw below suggests, it will be on some kind of wheel and the text should keep the orientation aka face the opposite side of the center of the wheel
- as far as I understood, I will not need DrawSVGPlugin, right ? 😅