How to flip numbers, add borders for circle in svg in my case?

Question

Angular

I made such a circle, like a clock. Here is the link
Now there are problems that I can not solve:
1. How to make the numbers be even, not inverted?
2. How to add a border, that is, separate them as in the picture below.
3. Why doesn't the inner circle start correctly? Maybe write a separate function for each circle?
Here is the picture that I want to see.

Answer 1

In the svg generating code, remove the transformation for e-to-numbers and just give them the appropriate coordinates.
For example, for the number "1":

<text _ngcontent-c0="" fill="#F8B133" font-size="3" y="16" x="26">1</text>