Как перевернуть цифры, добавить границы для круга в svg в моем случай?

Question

[Qairat]

Сделал вот такой круг, типа часы. Вот ссылка
Теперь такие проблемы, которые не могу решать:
1. Как сделать чтобы цифры были ровными, а не перевернутыми?
2. Как добавить бордер, то есть разделить их как в картинке внизу.
3. Почему внутренний круг не правильно начинается? Может для каждого круга отдельную функцию написать?
Вот картинка, что я хочу видеть.

Comments

[Qairat]

минуточку, не правильно указал ссылку.

[Qairat]

3-проблему решил

[theykillimmortal]

Может быть лучше изменить подход в сторону path вместо circle?
Вы рассматриваете d3.js? Вот пример на d3.js.
Тогда и текст позиционировать было бы намного легче, а также контролировать border.

Если Вам не подходит этот вариант - дайте знать.

Answer 1

[Odisseya]

В коде генерирующем svg уберите трансформацию для эл-в цифр и просто задайте им соответствующие координаты.
Например, для цифры «1»:

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

Comments

[Qairat]

да вот тоже хотел так задавать через координаты. Но как найти куда поставить цифры?