有没有办法让pi在CSS calc中? [英] Is there a way to have pi in a CSS calc?

问题描述

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

I have an SVG circle animation for a progress bar where the stroke-dashoffset is animated from 0,radius to radius,0 (for 0% to 100%).

圆的周长的等式为pi * d.有没有一种方法可以使用CSS calc函数，在其中可以使用pi值，而不只是一个舍入值(如3.14)?

The equation for the length of the circumference of a circle is pi * d. Is there a way to use a CSS calc function where it can use a value of pi, rather than just a rounded value (like 3.14)?

推荐答案

不幸的是，CSS中没有PI变量之类的东西.

There's no such thing as a PI variable in CSS, unfortunately.

但是 ..

您可以可以使用CSS变量为其分配数字，缺点是它具有 嗯，再也没有了

You can make use of CSS variables to assign a number to it, downside to this is that it has a really, really bad browser support. Well, not any more

这将像:

:root {
  --PI: 3.14159265358979; // enter the amount of digits you wish to use
}

.circle {
    width: calc(100 * var(--PI));
}

最好的解决方案是使用预处理器(例如SASS或Less)将PI变量分配给它，这类似于SASS中的以下示例:

The best solution would be to use a preprocessor such as SASS or Less to assign the PI variable to, this would look like the following example in SASS:

$pi: 3.14159265358979 // amount of digits you wish to use

.circle {
    width: calc(100 * ${pi});
}

如评论中所述，某些浏览器(Safari + IE)舍入到两位小数，其中Chrome和Firefox可以舍入到(至少)四位小数.

As mentioned in the comments, some browsers (Safari + IE) round to 2 decimals, where Chrome and Firefox can round up to (at least) 4 decimals.

这篇关于有没有办法让pi在CSS calc中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！