Firstly, becuase when it can, the text curves along with the edges of the wheel — not the simplest thing to do, but I felt like it looked nicer and was probably the expectation of the user. That's only possible with an svg <textPath>.
The text paths reuse some of the same functions used to draw the rest of the wheel.
I think there's a performance reason too. I haven't actually tested this, but my understanding is that the browser treats an inline svg in a similar way to a single image. So performing animations on it is less expensive to compute — i'd have to double check that.
The svg scales to fit the user's device. I suppose it is possible to set a font-size relative the parent's height, but that didn't occur to me at the time.
Web and Software Frontend Developer. Used to work in Full-stack JavaScript.Been at this for a few years now, and think I now understand my specific domain pretty well. Still a lot to learn though.
Location
Manchester, UK
Education
Web Systems Design BSc at Sheffield Hallam University, Sheffield, UK
That's a good question.
Firstly, becuase when it can, the text curves along with the edges of the wheel — not the simplest thing to do, but I felt like it looked nicer and was probably the expectation of the user. That's only possible with an svg
<textPath>
.The text paths reuse some of the same functions used to draw the rest of the wheel.
I think there's a performance reason too. I haven't actually tested this, but my understanding is that the browser treats an inline svg in a similar way to a single image. So performing animations on it is less expensive to compute — i'd have to double check that.
The svg scales to fit the user's device. I suppose it is possible to set a font-size relative the parent's height, but that didn't occur to me at the time.
Thanks for the detailed reasoning, I think you made the right decision.