Как динамически изменить ширину path, в зависимости от кол-ва элементов?

Есть сайт сайт на вью, нужно сделать вот такой круг:
5fbf7ebd274d2393673961.png
Кол-во частей в круге может быть от 2 до 12.
Я дошёл до такого этапа:
5fbf7f16e63fe298609083.png
И не могу понять, как изменить ширину этих частей, когда их меньше. Вот так они выглядят у меня в меньшем кол-ве:
5fbf7f7502a05118373302.png
Нужно чтобы они занимали почти всю ширину круга.

Вот часть кода:
<template lang="pug">
    #dd
        loading(v-if="!desc")
        svg(viewBox="0 0 856 856").person-description
            g._category(v-for="category, categoryIndex in mainCategories" 
            :key="categoryIndex" 
            :style="{transform: rotate(categoryIndex,mainCategories)}" 
            :data-category-index="categoryIndex" 
            :data-category-name="category") 
                transition(name="showDescItem" appear)
                    path(:d="M427,427l-1-222c19.5,0.7,47.5,3.9,78.9,15.6c25.5,9.5,45.3,21.6,59.4,31.7C518.5,310.6,472.8,368.8,427,427z ":class="{'person-description__sub-category_without-delay': delay}")._path 

</template> 
<script> 
  data: () => ({
            mainCategories: {
                1: 'Власть',
                2: 'Отношения',
                3: 'Духовный рост',
                4: 'Гармония',
                5: 'Семья',
                6: 'Досуг и отдых',
                7: 'Здоровье',
                8: 'Карьера',
                9: 'Семья',
            },
methods: {
             rotate(id,categories) {
                let length = Object.keys(categories).length
                return ('rotateZ(' +id * (360 / length) + 'deg)');
            },
</script>
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
RAX7
@RAX7
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
25 янв. 2021, в 11:26
3000 руб./за проект
21 янв. 2021, в 20:39
60000 руб./за проект
25 янв. 2021, в 11:12
2000 руб./за проект