Tôi có hoạt ảnh vòng tròn SVG cho thanh tiến trình nơi stroke-dashoffset được hoạt hình từ 0,radius đến radius,0 (từ 0% đến 100%).Có cách nào để có pi trong CSS calc không?
Phương trình cho chu vi vòng tròn là pi * d. Có cách nào để sử dụng một chức năng CSS calc, nơi nó có thể sử dụng một giá trị của pi, chứ không phải chỉ là một giá trị làm tròn (như 3,14)?
Không có gì là biến PI trong CSS, thật không may.
Tuy nhiên ..
Bạn thể làm use of CSS variables để gán một số cho nó, nhược điểm của việc này là nó có một really, really bad browser support.
này sẽ làm việc như:
:root {
--PI: 3.14159265358979; // enter the amount of digits you wish to use
}
.circle {
width: calc(100 * var(--PI));
}
Giải pháp tốt nhất là sử dụng một bộ tiền xử lý như SASS hoặc Less để gán biến PI, điều này sẽ giống như llowing dụ trong Sass:
$pi: 3.14159265358979 // amount of digits you wish to use
.circle {
width: calc(100 * ${pi});
}
EDIT: Như đã đề cập trong các ý kiến, một số trình duyệt (Safari + IE) tròn đến 2 số thập phân, nơi Chrome và Firefox có thể khỏa lấp lên đến (ít nhất) 4 số thập phân.
Biến CSS không được hỗ trợ đầy đủ. http://caniuse.com/#feat=css-variables – Ouroborus
Đó là những gì tôi đã đề cập, và lý do chính tôi đã chỉnh sửa trong tùy chọn SASS hoặc Ít hơn. – Roberrrt
Một tùy chọn khác là trình chuyển đổi CSS (chuyển đổi từ CSS cũ sang CSS cũ hơn) như 'cssnext'.Chỉ cần đảm bảo "CSS mới hơn" dựa trên các tiêu chuẩn hoặc ít nhất các trình duyệt mới hơn sẽ chấp nhận nó, trừ khi bạn chuẩn bị thay đổi nó sau mỗi vài tháng. – trysis
số
Hãy xem xét giá trị sẽ được làm tròn vì máy tính không thể nhận biết đầy đủ tất cả các số. Chỉ cần sử dụng một xấp xỉ dài cho pi:
3.14159265358979
Một khi bạn đã đi xa đến mức đó, bạn cũng có thể thêm một chữ số nữa: làm cho giả định hợp lý của đại diện IEEE 754 cho float, '3.141592653589793' là tốt nhất có thể, theo nghĩa là nó tròn tới IEEE 754 gần nhất giá trị nhị phân64 với giá trị thực của π. Giá trị bạn đưa ra sẽ giảm khoảng 7,3 ulps (đơn vị ở vị trí cuối cùng). –
Bạn có thể sử dụng một cái gì đó gần đúng, tùy theo tính chính xác bạn cần:
22/7 = 3,14
377/120 = 3.142
355/113 = 3,141592
Vì Ouroborus đã đề cập đến các trình duyệt chủ yếu là các số tròn chỉ với 2 chữ số sau dấu thập phân nên không có nhiều điểm trong việc sử dụng giá trị khác 3.14 nhưng nếu bạn không hài lòng với lý do tại sao không chỉ sử dụng '22/7' và để cho trình duyệt quyết định cách nó muốn xử lý? – Harry
Có lẽ tốt hơn nên sử dụng JavaScript cho tác vụ hoạt ảnh này: 'var intRadius = Math.floor (objCircle.offsetWidth/2)' –
"Phương trình cho chiều dài bán kính của một vòng tròn là pi * d." - Tôi đoán bạn có nghĩa là * chu vi * – Danield