Как реализовать закругленную дугу с процентом?

Question

[olenafront097]

Comments

[Игорь]

только svg

Answer 1

[Александр]

Comments

[olenafront097]

Александр, спасибо, а если вот такой случай? добавилась белая дуга (она не меняется, все время 100%)
не совсем понимаю. как добавить

[Александр]

olenafront097, уверены, что на SVG не проще сделать? А так, есть пример заполнения круга, следовательно нарисовать просто дугу от 0 до 2Пи меньшего радиуса и обвести белым.

[olenafront097]

Александр, но тут ведь тоже скругленные уголки

[Александр]

olenafront097, обновил.

[olenafront097]

Александр, спасибо,
только если в одном случае нужна эта белая дуга, а в другом она вовсе не нужна

но как-то через атрибут решить? чтобы можно было контролировать

ведь сейчас везде будет белая дуга

[Александр]

olenafront097,
1. Добавить какой-нибудь атрибут, считать его, привести к булеву обычным сравнением.
2. Передать булево значение новым аргументов в функцию createCircleBar.
3. На основе нового атрибута рисовать или не рисовать белую дугу в функции draw.

[olenafront097]

Александр, примерно так? https://codepen.io/olenaflowers/pen/LYzqzKy?editor...

[Александр]

olenafront097, так. Только атрибут data-value максимально неинформативен в данном случае.

[olenafront097]

Александр, data-flag лучше?

[Александр]

olenafront097, я полагаю, Вам в конечном итоге выбирать название, главное чтобы Вам было понятно, что это за data-flag там в коде.

Answer 2

[Андрей Мартынкевич]

Такой результат пойдет?)