kissu

@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 ! ?

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 ? ?