CSS calc中有一种方式可以使用π吗？

Question

CSS calc中有一种方式可以使用π吗？

csssvgcss-animations

37

我有一个SVG圆形动画用于进度条，其中stroke-dashoffset从0,radius到radius,0进行动画处理(对应0%到100%)。

圆周长的长度方程式为pi * d。是否有一种方法可以使用CSS的calc函数来使用pi的值，而不仅仅是一个舍入后的值(如3.14)?

- Philip Eagles

1

正如Ouroborus所提到的，浏览器通常会将数字四舍五入为小数点后两位，因此除了3.14之外，使用其他值并没有太大意义。但是如果您对此感到不舒服，为什么不只是使用“22/7”，让浏览器决定如何处理呢？ - Harry

如果我们知道你为什么问这个问题，那可能会有所帮助。 - Tony Ennis

4

表示一个未舍入的圆周率值是不可能的。圆周率是无理数，因此不可表为有理数的形式。 - Liam

2

如果使用比3.14更好的近似值能够产生更好的视觉效果，我会感到惊讶。 - user1275485

3

使用3.14作为直径为1000像素的圆的半径，将导致偏差为1像素...所以这取决于您的圆有多大。 - Holger Will

显示剩余2条评论

4个回答

10

不必考虑精确数值，因为计算机无法完全表示所有数字。只需使用一个较长的pi近似值：

3.141592653589793

- Ouroborus

11

如果你已经做到了这一步，为什么不再增加一个有效数字呢：根据IEEE 754浮点数表示法的合理假设，3.141592653589793是最好的选择，因为它会四舍五入为最接近真实值π的IEEE 754二进制64位值。你提供的值将会有大约7.3个ulp（即最后一位单位）左右的误差。 - Mark Dickinson

由于这个评论非常受欢迎，我已经自作主张地编辑了答案，按照 @MarkDickinson 的建议添加了第15位小数。 - Potherca

4

您可以根据所需的精度使用以下近似值：

22/7 = 3.14

377/120 = 3.142

355/113 = 3.141592

- AlecTMH

3

今天在Sass中，您可以访问PI变量。来源

@use 'sass:math';

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

然而，正如其他人所提到的，它仍然只是一个近似的π值，不是真正的π。尽管如此，它是一个不错的近似值：

@debug math.$pi; // 3.1415926536

- Patryk Wlaź

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- roberrrt-s · Accepted Answer

现在有一个<calc-constant> pi 常量，只能在 CSS 的 calc() 数学函数中使用。

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

然而，浏览器的支持情况不好。截至2023年8月，只有Safari和Firefox支持。

实际上，截至2023年11月的最新更新，支持情况目前相当不错！全球范围内超过90%。

相反，你可以使用CSS变量来为它分配一个数字：

:root {
  --pi: 3.14159265358979;
}

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

如评论中所提到的，一些浏览器（Safari + IE）会将数字四舍五入到两位小数，而Chrome和Firefox则可以将数字四舍五入到（至少）四位小数。

另一个解决方案是使用预处理器，比如SASS或Less来分配PI变量。

例如，使用SASS：

$pi: 3.14159265358979

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