Есть ли способ иметь pi в CSS calc?

У меня есть анимация круга SVG для индикатора выполнения, где stroke-dashoffset анимируется от 0,radius до radius,0 (от 0% до 100%).

Уравнение длины окружности окружности pi * d. Есть ли способ использовать функцию CSS calc, где он может использовать значение pi, а не просто округленное значение (например, 3.14)?

Ответ 1

К сожалению, в CSS нет такой вещи, как переменная PI.

Однако..

Вы можете использовать CSS-переменные для присвоения ему номера, недостатком этого является то, что он имеет действительно, очень плохую поддержку браузера.

Это будет работать так:

:root {
  --PI: 3.14159265358979; // enter the amount of digits you wish to use
}

.circle {
    width: calc(100 * var(--PI));
}

Лучшим решением было бы использовать препроцессор, такой как SASS или Less, для присвоения переменной PI, это будет выглядеть следующим образом в SASS:

$pi: 3.14159265358979 // amount of digits you wish to use

.circle {
    width: calc(100 * ${pi});
}

ОБНОВЛЕНИЕ: как упоминалось в комментариях, некоторые браузеры (Safari + IE) округляют до 2 десятичных знаков, где Chrome и Firefox могут округлять до (как минимум) 4 десятичных знаков.

Ответ 2

Номер

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

3.141592653589793

Ответ 3

Вы можете использовать что-то приблизительное, в зависимости от требуемой точности:

22/7 = 3,14

377/120 = 3,142

355/113 = 3,141592