Ребятушки, кто может подсказать по svg? https://codesandbox.io/s/recursing-sammet-re53xu

Question

Клуб Vue.js-разработчиков

Ренат

Ребятушки, кто может подсказать по svg? https://codesandbox.io/s/recursing-sammet-re53xu

#programming #russian #vue.js

0

14.03.2022

8 ответов

11 просмотров

Ренат Автор вопроса

Эркин Бахтушкин
Поясните. Круг будет обновляться без перезагрузки ...

статика

0

14.03.2022

Ренат Автор вопроса

если бы полностью сразу заполнялся понятно что можно, тут именно вопрос в том что каждый path может быть заполнен в диапазоне который придет с сервера

0

14.03.2022

Эркин Бахтушкин

Ренат
если бы полностью сразу заполнялся понятно что мож...

Смотрите. У вас есть 4 заполняющих path-ов. Они идут по порядку. Если сервер дает 10%, вы показываете только первый, если там все полностью, то все 4-ре path-а. Ну если половина, то только первых два. Вроде все просто. Или может что то не понял?

0

14.03.2022

Ренат Автор вопроса

Эркин Бахтушкин
Смотрите. У вас есть 4 заполняющих path-ов. Они ид...

каждый path это статус который приходит с сервака, (допустим 1,2,3,4) с сервака приходит статус 1 = 30% и первый path должен заполниться на 30%. в след раз с сервака приходит статус 1 = 100%, 2 = 100%, 3 = 20% - в таком случае 1 и 2 path зполняются полностью, а 3 на 30%, 4 остается пустым, как сервака это будет приходить уже не важно, может просто придут статус 3 = 20%, это будет значить что предыдущие 2 полностью заполнены

0

14.03.2022

Эркин Бахтушкин

Ренат
каждый path это статус который приходит с сервака,...

Конечно можно сделать через SVG. Тут два способа. 1. Делать перерисовку самих дуг, но это жесть, будет дико сложно 2. Делать через overflow hidde и сдвигам. Но и это жесть. Просто же через css. А секции иммитировать линиями поверх круга, а закругленные концы маленькими кругами. Заполнение градиентом + сдвигом

0

14.03.2022

Ренат Автор вопроса

Эркин Бахтушкин
Конечно можно сделать через SVG. Тут два способа....

перерисовали дугами, но тоже через path - теперь все норм

0

14.03.2022

Ренат Автор вопроса

Эркин Бахтушкин
Конечно можно сделать через SVG. Тут два способа....

спасибо, кстати))

0

14.03.2022