एसवीजी पिक्सेल स्नैपिंग को संभालने के लिए कैसे करें

Question

मैं पथ तत्व का उपयोग करके दो svg लाइनों को प्रस्तुत करने की कोशिश कर रहा हूं। पहली पंक्ति में 1px चौड़ाई है और यह तेज दूसरी पंक्ति में 2px चौड़ाई है और यह धुंधला है
स्ट्रोक-चौड़ाई दोनों के लिए समान है। इस

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<path style="stroke-width:1;stroke:red;opacity:1;" d="M 300.5 250 L 300.5 300 "></path> 
<path style=" stroke-width:1;stroke:red;opacity:1;" d="M 350 250 L 350 300 "></path> 
</svg> 

Answer 1

ठीक करने के लिए मुख्य रूप से यह 0.5 ऑफसेट कि लाइन तेज बनाता है। By default, integer coordinates map to the intersections of the pixel squares. So a width-1 horizontal/vertical line is centered on the boundary between pixel rows and extends half way into the pixels on either side.

तो दूसरी पंक्ति को ठीक करने के लिए या तो समन्वय में 0.5 जोड़ें या शैली shape-rendering: crispEdges का उपयोग करें। ध्यान दें कि crispEdges एंटीअलाइजिंग को रोकता है इसलिए क्षैतिज/ऊर्ध्वाधर रेखाएं कुरकुरे हैं लेकिन कोण वाली रेखाएं अवरुद्ध दिखती हैं।

इसके अलावा स्ट्रोक-चौड़ाई = 1 मान्य सीएसएस वाक्यविन्यास नहीं है। पहला उदाहरण स्ट्रोक-चौड़ाई: 1 सही है।