我有一个进度条的SVG圆动画,其中stroke-dashoffset从0,半径到半径,0(0%到100%)的动画。
圆周长的方程为pi * d。有没有办法使用CSS计算函数,其中它可以使用pi的值,而不只是一个舍入值(如3.14)?
解决方法
在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小数。