web-dev-qa-db-ja.com

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

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

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

csssvgcss-animations
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