बचें लाइन

Question

आकार मैं कई अलग रंग आयतों का उपयोग कर रहा हूँ एक एसवीजी डेटा दृश्य बनाने के लिए। यह बहुत अच्छा काम करता है लेकिन कभी-कभी पृष्ठभूमि रंग आयत के बीच में खून बहता है। मैं क्रोम के साथ ब्राउज़ कर रहा हूं लेकिन अन्य ब्राउज़र समान रूप से प्रभावित होते हैं।

http://jsfiddle.net/dVEPk/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <rect x="10.5" y="10" height="100" width="100" 
      style="stroke:none; fill: #00cc00"/> 
    <rect x="110.5" y="10" height="100" width="100" 
      style="stroke:none; fill: #00cc00"/> 
</svg> 

Chrome में, यदि एक्स ऑफसेट एक पूर्णांक, रेखा दिखाई नहीं देता है है।

मुझे यकीन है कि मैं आयतों अंतरिक्ष वे पर कब्जा करने के लिए है तुलना में थोड़ा बड़ा बनाकर रेखाओं से बचने कर सकते हैं। लेकिन यह एक हैक की तरह लगता है: क्या "ग्रौउट" के बिना पूरी तरह से टाइल किए गए आकार प्राप्त करने के लिए कोई एसवीजी मुहावरे या सर्वोत्तम अभ्यास है?

मैं भी प्रदर्शन प्रतिपादन क्योंकि मेरे दृश्यावलोकन बहुत बड़ा हो सकता से चिंतित हूँ (कहते हैं कि 100 एमबी एक्सएमएल .svg)। मैं रेंडरर संकेत देने में सक्षम होना चाहता हूं जैसे "इस <g> में कोई भी आकार ओवरलैपिंग नहीं कर रहा है"?

Answer 1

यह आकार और पृष्ठभूमि के बीच काम पर antialiasing है। यदि आप इसे आकृति पर सेट आकार-प्रतिपादन = "crispEdges" सेट करना चाहते हैं। आप या तो इसे रेक्ट तत्वों पर या <svg> पर सेट कर सकते हैं, जिस स्थिति में रेक्ट तत्व इसे प्राप्त करेंगे।

आप समन्वय करने के लिए 0.5 जोड़कर लाइन की स्थिति समायोजित करने में सक्षम हो सकता है। इस पर अधिक जानकारी के लिए cairo FAQ देखें।