funciona - ¿Hay alguna forma de tener pi en un CSS calc?

height calc div

Question

Tengo una animación de círculo SVG para una barra de progreso donde el stroke-dashoffset está animado desde 0,radius a radius,0 (de 0% a 100%).

La ecuación para la longitud de la circunferencia de un círculo es pi * d . ¿Hay alguna manera de utilizar una función de calc CSS donde puede usar un valor de pi, en lugar de solo un valor redondeado (como 3.14)?

Answer 1

No hay tal cosa como una variable PI en CSS, desafortunadamente.

Sin embargo ...

Puede usar variables CSS para asignarle un número, lo que es negativo es que tiene un soporte de navegador realmente, muy malo.

Esto funcionaría así:

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

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

La mejor solución sería usar un preprocesador como SASS o Less para asignar la variable PI, esto se vería como el siguiente ejemplo en SASS:

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

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

EDITAR: Como se mencionó en los comentarios, algunos navegadores (Safari + IE) redondean a 2 decimales, donde Chrome y Firefox pueden redondear hasta (al menos) 4 decimales.

Answer 2

No.

Tenga en cuenta que el valor se redondeará de todos modos como las computadoras no pueden realizar todos los números. Solo usa una aproximación larga para pi:

3.14159265358979

Answer 3

Puedes usar algo aproximado, dependiendo de la precisión que necesites:

22/7 = 3.14

377/120 = 3,142

355/113 = 3,141592