изменить strokeDashoffset на Percent при использовании circle и svg

Question

я хочу создать круговую шкалу прогресса.

я пишу этот код в html:

    <svg>
        <circle cx="70" cy="70" id="progress" r="70"></circle>
        <circle cx="70" cy="70" r="70"></circle>
      </svg>

и пишу этот код в css:

 svg {
  width: 155px;
  margin-top: -131px;
  transform: translateX(16px);
  > circle {
    width: 136px;
    fill: none;
    stroke: red;
    stroke-width: 10px;
    stroke-dashoffset: 440;
    stroke-dasharray: 440;
    stroke-linecap: round;
    transform: translateX(8px);
  }
 }

но когда я передаю процент изменения с помощью c strokeDashoffset, это не сработало:

calc(400- (400 * 87) / 100)

в чем проблема? как я могу решить эту проблему ????

Answer 1

Очевидно, функция calc() немного придирчива и работает не во всех ситуациях. В некоторых случаях вы можете использовать безразмерный calc().

Например, он будет работать с line-height, но не с strokedashoffset. Я не знаю, почему и есть ли в этом правила. Кто-нибудь?

Тогда, как правило, вам нужно пространство вокруг вашего операнда, поэтому здесь у вас пропущен пробел перед знаком минус.

И последнее, но не менее важное, ваше значение strokedasharray кажется слишком большим для сравнения до размера круга, чтобы можно было видеть любой da sh.