有没有办法在CSS计算中使用PI

Question

我有一个用于进度栏的SVG圆圈动画，其中stroke-dashoffset是从0,radius到radius,0动画的（以0％至100％）。

圆圈长度的方程为 pi * d。有没有一种方法可以使用CSS calc函数可以使用PI值，而不仅仅是圆形值（例如3.14）？

Answer 1

现在有一个<calc-constant> pi常数可以仅在CSS calc()中使用数学功能：

.circle {
  --diameter: 3px;
  --circumference: calc(pi * var(--diameter);  <-- `pi`
  stroke-dashoffset: var(--circumference);
}

但是，浏览器支持不好。（截至2023年8月，它只是Safari和Firefox。）

---

相反，您可以使用CSS变量为其分配一个数字：

:root {
  --pi: 3.14159265358979;
}
.circle {
  --diameter: 3px;
  --circumference: calc(var(--pi) * var(--diameter));
  stroke-dashoffset: var(--circumference);
}

如评论中提到的，一些浏览器（Safari IE）四舍五入到2个小数，Chrome和Firefox可以围绕（至少）4个小数。

---

另一个解决方案是使用诸如SASS或更少的预处理器将PI变量分配给。

。

例如，使用sass：

$pi: 3.14159265358979
.circle {
  --diameter: 3px;
  --circumference: calc(${pi} * var(--diameter));
  stroke-dashoffset: var(--circumference);
}

---

Answer 2

no。

考虑该值将无论如何都将被四舍五入，因为计算机无法完全实现所有数字。只需在PI上使用冗长的近似值：

3.141592653589793

Answer 3

您可以使用大约的东西，具体取决于您需要的准确性：

22/7 = 3.14

377/120 = 3,142

355/113 = 3,141592

Answer 4

您今天可以使用SASS的PI变量。来源

@use 'sass:math';
$d: 10;
$yourStuff: math.$pi * $d;

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

@debug math.$pi; // 3.1415926536