Existe-t-il un moyen d'avoir pi dans un calcul CSS ?

Question

J'ai une animation de cercle SVG pour une barre de progression où la stroke-dashoffset est animé à partir de 0,radius à radius,0 (de 0% à 100%).

L'équation de la longueur de la circonférence d'un cercle est la suivante pi * d . Existe-t-il un moyen d'utiliser un fichier CSS calc où il peut utiliser une valeur de pi, plutôt qu'une simple valeur arrondie (comme 3,14) ?

Answer 1

Les variables PI n'existent pas en CSS, malheureusement.

Cependant ..

Vous peut faire utilisation des variables CSS pour lui attribuer un numéro, L'inconvénient, c'est qu'il a un un support de navigateur vraiment, vraiment mauvais. Eh bien, plus maintenant.

Cela fonctionnerait comme suit :

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

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

La meilleure solution serait d'utiliser un préprocesseur tel que SASS ou Less pour assigner la variable PI, cela ressemblerait à l'exemple suivant dans SASS :

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

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

EDIT : Comme mentionné dans les commentaires, certains navigateurs (Safari + IE) arrondissent à 2 décimales, alors que Chrome et Firefox peuvent arrondir à (au moins) 4 décimales.

Answer 2

Non.

Considérez que la valeur sera de toute façon arrondie car les ordinateurs ne peuvent pas réaliser tous les nombres. Utilisez simplement une longue approximation pour pi :

3.141592653589793

Answer 3

Vous pouvez utiliser quelque chose d'approximatif, selon la précision dont vous avez besoin :

22/7 = 3.14

377/120 = 3,142

355/113 = 3,141592

Answer 4

Vous avez un accès à la variable PI dans sass aujourd'hui. source

@use 'sass:math';

$d: 10;
$yourStuff: math.$pi * $d;

Cependant, comme d'autres l'ont mentionné, il s'agirait toujours d'une valeur d'IP approximative, et non d'un IP réel. Mais c'est une bonne approximation :

@debug math.$pi; // 3.1415926536