Mam animację koła SVG dla paska postępu, gdzie stroke-dashoffset jest animowany od 0,radius do radius,0 (dla 0% do 100%).Czy istnieje sposób na uzyskanie pi w arkuszu kalkulacyjnym CSS?
Równanie długości obwodu okręgu to pi * d. Czy istnieje sposób użycia funkcji CSS calc, w której można użyć wartości pi, a nie tylko zaokrąglenia (np. 3.14)?
Niestety, nie ma czegoś takiego jak zmienna PI w CSS.
Jednak ..
Ty może zrobić use of CSS variables przypisać numer do niego, minusem tego jest to, że ma really, really bad browser support.
To działa tak:
:root {
--PI: 3.14159265358979; // enter the amount of digits you wish to use
}
.circle {
width: calc(100 * var(--PI));
}
Najlepszym rozwiązaniem byłoby użycie preprocesora, takiego jak SASS lub Less, do przypisania zmiennej PI, co wyglądałoby jak Przykładem llowing w SASS:
$pi: 3.14159265358979 // amount of digits you wish to use
.circle {
width: calc(100 * ${pi});
}
EDIT: Jak wspomniano w komentarzach, niektóre przeglądarki (IE + Safari) zaokrąglić do 2 miejsc po przecinku, gdzie Chrome i Firefox może zaokrąglić w górę do (przynajmniej) 4 miejsc po przecinku.
Zmienne CSS nie są w pełni obsługiwane. http://caniuse.com/#feat=css-variables – Ouroborus
To, o czym wspomniałem, i główny powód, dla którego edytowałem opcję SASS lub Less. – Roberrrt
Inną opcją jest transpiler CSS (konwertuje z nowszego CSS na starszy CSS), taki jak 'cssnext'.Po prostu upewnij się, że "nowsze CSS" jest oparte na standardach, lub przynajmniej te nowsze przeglądarki przyjmą je, chyba że będziesz gotów je zmieniać co kilka miesięcy. – trysis
nr
uważają, że wartość zostanie zaokrąglona w każdym razie jak komputery nie mogą w pełni zrealizować wszystkie numery. Wystarczy użyć długiego przybliżenie dla pi:
3.14159265358979
Gdy już zajdziesz tak daleko, możesz równie dobrze dodać jeszcze jedną cyfrę: racjonalne założenie reprezentacji IEEE 754 dla płynów, "3.141592653589793" jest tak dobre, jak to możliwe, w tym sensie, że zaokrągla się do najbliższego IEEE 754 binary64 wartość do prawdziwej wartości π. Podana wartość wyłączy się o około 7,3 u/s (jednostki na ostatnim miejscu). –
Można użyć czegoś przybliżoną, w zależności od dokładności, czego potrzebujesz:
22/7 = 3,14
377/120 = 3142
355/113 = 3,141592
Jako że Ouroborus wspomniał o przeglądarkach głównie zaokrąglających liczby do 2 cyfr po przecinku, nie ma sensu używać wartości innej niż 3.14, ale jeśli nie czujesz się z tym dobrze, dlaczego nie użyć po prostu '22/7' i pozwolić przeglądarce zdecydować, jak chce sobie poradzić? – Harry
Być może lepiej byłoby użyć JavaScript do tego zadania animacji: 'var intRadius = Math.floor (objCircle.offsetWidth/2)' –
"Równanie długości promienia okręgu to pi * d." - Chyba masz na myśli * obwód * – Danield