@mikel thanks for the welcome. ^^
Unfortunately, your solution is kinda not a possibility since the project I'm working on is essentially a Vue app that will fetch the data on Firebase (I'm not planning of having any kind of backend actually).
So, every piece of text can be modified on the fly and it will also have a "you chose that quarter, ok ! now I will remove it from the wheel and expand the other quarters accordingly". The whole point is to make a lot of things dynamic as you can see. GSAP will add that tasty animations on top of all !
@Visual-Q hm, I'm a bakka, just realized that `tspan` do have a `textLength` and `lengthAdjust` attributes...
After some reading, the official doc says
I guess I still will use it like that... Because, `text-anchor` and `startOffset` are not working as expected in my case 90...
Damn ! Expected to have a `tspan-center-align: middle` or something native. ?
I will use `getTotalLength`, get the total length of a path, then strip 10% of it on both sides, add a "margin" of 10% with `x` or `dx`, that will give me a centered text, independently of the number of words, in pair with `lengthAdjust="spacingAndGlyphs"`, the result seems to be really great as this example shows.
I will of course try to find a clever way to split the text into multiple lines with increasing numbers of chars for each line (coming from the center of the wheel).
For the vertical alignment, I will simply make the computations to get a smaller radius and the path will pretty much vertical center it by itself.
Oh and all of this will be less dirty thanks to Vue !
@PointC I'm pretty much not in charge of Edge support, so I can totally dish it out like it does not even exist.
For the text split part, I will try to find a naive implementation, I do essentially have 3 or 4 words of various length to split on 2 lines, not soooo hard to deal with I guess. I guess GSAP cannot help me on that part (in case I do have more complex texts) ? ?
Also sorry if my questions are not really GSAP related but are more about general SVG. ?
Thanks for the help guys ! ?