¿Hay alguna manera de tener pi en un calc CSS?

Tengo una animación de círculo SVG para una barra de progreso donde el stroke-dashoffset está animado de 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 forma de usar una función CSS calc donde pueda usar un valor de pi, en lugar de solo un valor redondeado (como 3.14)?

Author: Philip Eagles, 2016-11-24
Source

3 answers

Desafortunadamente, no existe una variable PI en CSS.

Sin Embargo..

Usted puede hacer uso de variables CSS para asignarle un número, la desventaja de esto es que tiene un soporte de navegador muy, muy malo.

Esto funcionaría como:

: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.

 28
Author: Roberrrt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-24 13:31:09

No.

Considere que el valor se redondeará de todos modos, ya que las computadoras no pueden realizar todos los números. Simplemente use una aproximación larga para pi: 

3.14159265358979
 9
Author: Ouroborus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-24 09:32:49

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

22/7 = 3.14

377/120 = 3,142

355/113 = 3,141592

 3
Author: AlecTMH,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-24 14:54:48