Search the Community

Hi ! 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')[0].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 ? ?