stroke-dashoffset
が0,radius
からradius,0
(0%から100%まで)にアニメーション化されているプログレスバーのSVGサークルアニメーションがあります。
円周の長さの式はpi * d
です。丸められた値(3.14など)ではなく、piの値を使用できるCSS calc
関数を使用する方法はありますか?
残念ながら、CSSにはPI変数のようなものはありません。
ただし..
あなたcanCSS変数の使用 に番号を割り当てる、これの欠点は、 が本当に悪いことです。ブラウザのサポート。
これは次のように機能します:
: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桁に切り上げることができます)。
番号。
コンピューターはすべての数値を完全に認識できないため、値はとにかく丸められることを考慮してください。 piに長い近似を使用するだけです。
3.14159265358979
必要な精度に応じて、おおよその値を使用できます。
22/7 = 3.14
377/120 = 3,142
355/113 = 3,141592