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

Question

我有一个进度条的SVG圈子动画，其中stroke-dashoffset的动画从0,radius到radius,0（0％到100％）。

圆周长度的等式为pi * d。有没有办法使用CSS calc函数，它可以使用pi值，而不只是舍入值（如3.14）？

Answer 1

遗憾的是，CSS中没有PI变量。

<强>然而 ..

你可以让use of CSS variables为其分配一个号码，不足之处是它有一个really, really bad browser support.

这就像：

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

Answer 3

根据您的需要，您可以使用近似值：

22/7 = 3.14

377/120 = 3,142

355/113 = 3,141592

Answer 4

您今天可以访问 sass 中的 PI 变量。 source

@use 'sass:math';

$d: 10;
$yourStuff: math.$pi * $d;

然而，正如其他人提到的，它仍然是一个近似的 PI 值，而不是真正的 PI。不过，这是一个不错的近似值：

@debug math.$pi; // 3.1415926536