एसवीजी सर्कुलर तत्व

Question

पर एलियासिंग से छुटकारा पा रहा है मैं एनिमेटेड एसवीजी पाई चार्ट बना रहा हूं। असल में मेरे पास दो एसवीजी तत्व हैं, पहले border-radius50% प्राप्त होता है, दूसरा एक सर्कल है जिसे मैं एक विशिष्ट मान तक भरता हूं। अंत में, यह एक सर्कल को दूसरे सर्कल के ऊपर बनाता है, दोनों में समान आयाम होते हैं।

कुछ प्रकार का एसवीजी एलियासिंग है जो छुटकारा पाने में मुश्किल लगता है। यह कम से कम Google क्रोम पर सर्कल के शीर्ष, बाएं, नीचे और दाएं "कोनों" पर बहुत दिखाई देता है।

यहाँ यहाँ एचटीएमएल हिस्सा

<figure id="pie" data-percentage="60"> 
    <div class="receiver"></div> 
    <svg width="200" height="200" class="chart" shape-rendering="geometricPrecision"> 
    <circle r="50" cx="100" cy="100" class="pie" shape-rendering="geometricPrecision"/> 
    </svg> 
</figure> 

है समस्या का अधिक सटीक वर्णन के लिए अपने codepen है। मैंने आकार-प्रतिपादन एसवीजी विशेषता सहित विभिन्न समाधानों की कोशिश की लेकिन इसका कोई फायदा नहीं हुआ।

यहाँ, एक स्क्रीनशॉट है अलियासिंग नहीं के रूप में दिखाई codepen में के रूप में (मेरे लिए कम से कम) है

Answer 1

पूर्ण svg प्रतिशत चक्र

मैं भी इस समस्या से पहले का सामना करना पड़ा: Pixel edge on circle ऐसा तब होता है जब आप सीमा-त्रिज्या वाले तत्व को संशोधित करते हैं।
आप उपर्युक्त लिंक, में उत्तर के लिए जा सकते हैं, लेकिन मुझे लगता है कि यदि आप केवल svg का उपयोग/संशोधित करते हैं तो यह बेहतर प्रदर्शन और सौंदर्य दोनों है।

उदाहरण:

var circ = document.getElementsByClassName("pie2"); 
 
var text = document.getElementsByClassName("text"); 
 
text = text[0]; 
 
circ = circ[0]; 
 
var maxvalue = 320; 
 
var value = maxvalue; 
 
var stop = false; 
 

 
function increase() { 
 
    if (value > 0) { 
 
    circ.style.strokeDashoffset = value--; 
 
    text.textContent = Math.abs(Math.floor((value/maxvalue) * 100) - 100) + "%"; 
 
    } else { 
 
    clearInterval(intervalid); 
 
    } 
 
} 
 

 
var intervalid = setInterval(increase, 25);

.pie { 
 
    fill: none; 
 
    stroke: #222; 
 
    stroke-width: 99; 
 
} 
 
.pie2 { 
 
    fill: none; 
 
    stroke: orange; 
 
    stroke-width: 100; 
 
    stroke-dasharray: 320; 
 
    stroke-dashoffset: 320; 
 
} 
 
.text { 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
}

<figure id="pie" data-percentage="90"> 
 
    <svg width="200" height="200" class="chart" shape-rendering="geometricPrecision"> 
 
    <circle r="50" cx="100" cy="100" class="pie" shape-rendering="geometricPrecision" /> 
 
    <circle r="50" cx="100" cy="100" class="pie2" /> 
 
    <text class="text" x="80" y="110">0%</text> 
 
    </svg> 
 
</figure>