有没有办法在CSS计算中使用pi？

Question

我有一个圆SVG动画的进度条,其中stroke-dashoffset从动画0,radius到radius,0(0%至100%).

圆周长度的等式是pi * d.有没有办法使用CSS calc函数,它可以使用pi的值,而不只是一个舍入值(如3.14)？

Answer 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位小数.

Answer 2

没有.

考虑到计算机无法完全实现所有数字,因此该值将被舍入.只需对pi使用冗长的近似值:

3.141592653589793