有没有办法在 CSS calc 中使用 pi？

Posted 2023-03-06

【中文标题】有没有办法在 CSS calc 中使用 pi？

【英文标题】：Is there a way to have pi in a CSS calc?

【发布时间】：2017-04-08 12:29:11

【问题描述】：

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

圆周长的公式是pi * d。有没有办法使用 CSS calc 函数，它可以使用 pi 的值，而不仅仅是一个四舍五入的值（如 3.14）？

【问题讨论】：

正如 Ouroborus 所提到的，浏览器大多将数字四舍五入到小数点后 2 位，因此使用 3.14 以外的值没有多大意义，但如果您对此不满意，为什么不只是使用22/7 并让浏览器决定它要如何处理？

也许最好使用 javascript 来完成这个动画任务：var intRadius = Math.floor(objCircle.offsetWidth / 2)

实际上不可能为 pi 表示一个 unrounded 值。 Pi is not rational!

如果使用优于 3.14 的近似值产生更好的视觉效果，我会感到惊讶。

使用 3.14 时，d=1000px 的圆的半径将偏移 1px...所以这取决于您的圆有多大。

【参考方案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);

编辑：如 cmets 中所述，某些浏览器（Safari + IE）四舍五入到小数点后两位，而 Chrome 和 Firefox 可以四舍五入到（至少）四位小数。

【讨论】：

这是我提到的，以及我在 SASS 或更少选项中编辑的主要原因。

另一个选项是 CSS 转译器（从较新的 CSS 转换为较旧的 CSS），例如 cssnext。只需确保“较新的 CSS”是基于标准的，或者至少确保较新的浏览器会采用它，除非您准备每几个月更改一次。

【参考方案2】：

没有。

考虑到无论如何都会对值进行四舍五入，因为计算机无法完全实现所有数字。只需对 pi 使用一个冗长的近似值：

3.141592653589793

【讨论】：

一旦你走了这么远，你不妨再多加一位：合理假设 IEEE 754 表示浮点数，3.141592653589793 尽可能好，在某种意义上它四舍五入到最接近 π 的真实值的 IEEE 754 binary64 值。您给出的值将减少大约 7.3 ulps（最后一个单位）。

由于评论非常受欢迎，我冒昧地编辑了答案，添加了第 15 位小数，正如@MarkDickinson 所建议的那样

【参考方案3】：

您可以使用近似值，具体取决于您需要的精度：

22/7 = 3.14

377/120 = 3,142

355/113 = 3,141592

【参考方案4】：

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

@use 'sass:math';

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

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

@debug math.$pi; // 3.1415926536