web-dev-qa-db-ja.com

CSS計算にpiを含める方法はありますか?

stroke-dashoffset0,radiusからradius,0(0%から100%まで)にアニメーション化されているプログレスバーのSVGサークルアニメーションがあります。

円周の長さの式はpi * dです。丸められた値(3.14など)ではなく、piの値を使用できるCSS calc関数を使用する方法はありますか?

31
Philip Eagles

残念ながら、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桁に切り上げることができます)。

28
Roberrrt

番号。

コンピューターはすべての数値を完全に認識できないため、値はとにかく丸められることを考慮してください。 piに長い近似を使用するだけです。

3.14159265358979
9
Ouroborus

必要な精度に応じて、おおよその値を使用できます。

22/7 = 3.14

377/120 = 3,142

355/113 = 3,141592

3
AlecTMH