Because, `text-anchor` and `startOffset` are not working as expected in my case 90.ĭamn ! Expected to have a `tspan-center-align: middle` or something native. is not intended for use to obtain effects such as shrinking or expanding text. See the Pen QoGxgG?editors=1010 by kissu ( on CodePen as far as I understood, I will not need DrawSVGPlugin, right ? 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 still keep it responsive on desktop/mobile (should be ok since it's SVG) wrap a longer sentence on 2 lines (the height static on the arc can stay static ofc) get a centered text with something around 80/90% of the total arc width 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). The closest thing that I've achieved is this: TextPathAttributes, in pair with some ugly `tspan` as shown in my codepen. 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. More Robust SVG Text was another resource, then I've tried startOffset = "50%" text-anchor = "middle"īut none of them were giving me exactly what I wanted because the most important thing here is the width of the SVG text. There are some cool things that I gathered on SVG Text Layout by Kurt Cagle blog post suggesting to use inlineSize. I took workshop which was really helpful to gather some things quickly ! To make it embrace the curved path, with dynamic length text (can be 5 letters or 25). I don't know how to center around a text path properly. I'm pretty new to SVG and struggling on some parts.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |