Как сверстать такие кликабельные части круга с текстом?

Сайт на vue. Есть такие части в круге, причём их количество может быть от 1 до 12.
5fe3c2789fc65745729553.png
Как можно их реализовать, чтобы при каждом количестве они были пропорциональные и заполняли весь круг? Пробовал дел делать их через path и для каждого кусочка высчитывал градус, на который он должен повернуться и применял
transform: rotateZ(xdeg). Но тогда текст на кусочках тоже трансформируется и не встаёт по середине, а улетает куда-то. К тому же, для разного количества кусочков делать разный path очень проблематично и долго. Также, пробовал делать через circle и mask, но тогда части не кликабельные.
  • Вопрос задан
  • 426 просмотров
Решения вопроса 2
я вообще не спец в этом, но вполне допускаю, что это обычный пирог - pie-chart условно.
а круг в центре просто позиционируете поверх. и никаких сложных движений.

просто потыкался в фиддлах на скорую руку. в качестве идеи.
Фиддл

еще вот что Вам нашел
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы