मेरे पास प्रगति पट्टी के लिए एक एसवीजी सर्कल एनीमेशन है जहां stroke-dashoffset0,radius से radius,0 (0% से 100% के लिए) से एनिमेटेड है।क्या सीएसएस कैल्क में पीआई रखने का कोई तरीका है?
सर्कल की परिधि की लंबाई के लिए समीकरण pi * d है। क्या सीएसएस calc फ़ंक्शन का उपयोग करने का कोई तरीका है जहां यह केवल गोल किए गए मान (जैसे 3.14) की बजाय पीआई के मान का उपयोग कर सकता है?
दुर्भाग्यवश, सीएसएस में पीआई वैरिएबल जैसी कोई चीज़ नहीं है।
हालांकि ..
आप use of CSS variables इसे करने के लिए एक नंबर आवंटित करने के लिए, इस नकारात्मक पहलू यह है कि एक really, really bad browser support.
इस तरह काम करेंगे है बना सकते हैं:
:root {
--PI: 3.14159265358979; // enter the amount of digits you wish to use
}
.circle {
width: calc(100 * var(--PI));
}
सबसे अच्छा समाधान पीआई वैरिएबल को असाइन करने के लिए एसएएसएस या कम जैसे प्रीप्रोसेसर का उपयोग करना होगा, यह इस तरह दिखेगा एस.ए.एस.एस. में llowing के उदाहरण:
$pi: 3.14159265358979 // amount of digits you wish to use
.circle {
width: calc(100 * ${pi});
}
संपादित करें: टिप्पणी में उल्लेख किया है, कुछ ब्राउज़रों (सफारी + आईई) 2 दशमलव, जहां Chrome और Firefox (कम से कम) 4 दशमलव में इसे राउंड कर सकते हैं दौर।
सीएसएस चर पूरी तरह से समर्थित नहीं हैं। http://caniuse.com/#feat=css-variables – Ouroborus
जो मैंने उल्लेख किया है, और मुख्य कारण जिसे मैंने SASS या Less के विकल्प में संपादित किया है। – Roberrrt
एक और विकल्प एक सीएसएस ट्रांस्लर है (नए सीएसएस से पुराने सीएसएस में परिवर्तित) जैसे 'cssnext'।बस सुनिश्चित करें कि "नया सीएसएस" मानक-आधारित है, या कम से कम नए ब्राउज़र इसे अपनाएंगे, जब तक कि आप इसे हर दो महीने में बदलने के लिए तैयार न हों। – trysis
सं
पर विचार करें कि मूल्य कंप्यूटर पूरी तरह से सभी नंबरों को महसूस नहीं कर सकते के रूप में वैसे भी बढ़ा दिया जाएगा। बस अनुकरणीय के लिए एक लंबा सन्निकटन का उपयोग करें:
3.14159265358979
एक बार जब आप इसे दूर कर चुके हैं, तो आप एक और अंक भी जोड़ सकते हैं: फ्लोट के लिए आईईईई 754 प्रतिनिधित्व की उचित धारणा बनाना, '3.141592653589793' जितना संभव हो उतना अच्छा है, इस अर्थ में कि यह निकटतम आईईईई 754 π के वास्तविक मूल्य के लिए binary64 मान। आपके द्वारा दिया गया मूल्य लगभग 7.3 उलप्स (अंतिम स्थान पर इकाइयों) से बंद हो जाएगा। –
तुम कुछ अनुमानित, सटीकता आप की जरूरत के आधार का उपयोग कर सकते हैं:
22/7 = 3,14
377/120 = 3.142
355/113 = 3,141592
जैसा कि ऑरोबोरस ने दशमलव बिंदु के बाद केवल 2 अंकों के लिए ब्राउज़रों का उल्लेख किया है, इसलिए 3.14 के अलावा किसी अन्य मान का उपयोग करने में बहुत कुछ नहीं है लेकिन यदि आप इसके साथ सहज नहीं हैं क्यों न केवल '22/7' का उपयोग करें और ब्राउज़र को यह तय करने दें कि यह कैसे संभालना चाहता है? – Harry
शायद इस एनीमेशन कार्य के लिए जावास्क्रिप्ट का उपयोग करना बेहतर होगा: 'var intRadius = Math.floor (objCircle.offsetWidth/2) ' –
" सर्कल के त्रिज्या की लंबाई के लिए समीकरण पीआई * डी है। " - मुझे लगता है कि आपका मतलब है * परिधि * – Danield