एसवीजी स्टैक्ड तत्व रंग ओवरलैप

Question

मेरे पास एक एसवीजी तत्व है जिसमें दो <circle> बच्चे समान सटीक आयाम और स्थिति वाले हैं। दोनों के बीच एकमात्र अंतर उनका रंग है: पहला लाल है और दूसरा हरा है। मैंने देखा है कि, हालांकि हरा सर्कल लाल से ऊपर है, फिर भी आप सर्कल के किनारों पर थोड़ा सा रंग शिफ्ट देख सकते हैं। क्या कोई तरीका है कि मैं रंग में इस बदलाव से बच सकता हूं?

यह इस प्रकार से साथ और लाल वृत्त के बिना नीचे की तरह लग रहा का एक स्क्रीनशॉट है:

Also here's the fiddle that I'm using to reproduce this.

और इन समाधान है कि मैंने कोशिश की लेकिन नहीं था गए हैं ' काम नहीं:

• एसवीजी पर shape-rendering के लिए अलग मान बाहर की कोशिश कर रहा - स्थापना यह crispEdges काम करने के प्रकार के लिए, लेकिन किनारों को बहुत जंजीर बना दिया। अन्य सभी मूल्य काम नहीं करते थे।
• शीर्ष तत्व में मामूली धुंध जोड़ना - बहुत अच्छी तरह से काम नहीं किया और रंग शिफ्ट को और अधिक दृश्यमान बना दिया।
• शीर्ष तत्व को थोड़ा बड़ा बनाना - काम करता है लेकिन यह इष्टतम नहीं है क्योंकि मैं इसे एक चाप के साथ उपयोग करूँगा और नीचे तत्व बिल्कुल वही होना चाहिए।

कोई भी अलग विचार स्वागत है।

Answer 1

आप एंटी-एलाइज्ड फ्रिंज डायल करने के लिए फ़िल्टर का उपयोग कर सकते हैं। इसका एक ही प्रभाव होगा जैसे crispEdges होना चाहिए।

<svg> 
    <defs> 
     <filter id="edge-removal"> 
      <feComponentTransfer> 
       <feFuncA type="table" tableValues="0 0 0 0 0 0 0 0 0 0 1" /> 
      </feComponentTransfer> 
     </filter> 
    </defs> 
    <g filter="url(#edge-removal)"> 
    <circle r="250" cx="275" cy="275" stroke="#FF0000" fill="none" stroke-width="50"></circle> 
    <circle r="250" cx="275" cy="275" stroke="#00FF00" fill="none" stroke-width="50"></circle> 
    </g> 
</svg>