तो आप एक पिक्सेल चौड़ी क्षैतिज और ऊर्ध्वाधर रेखाओं को अस्पष्ट किनारों के बजाय तेज के साथ प्रदर्शित करना चाहते हैं।
यदि आपका एसवीजी में सभी समन्वय पूर्णांकों हैं, हो सकता है अगर आप पूर्ण छवि 0.5 की भरपाई कर सकते हैं, एक को बदलने तत्व का उपयोग करके:
// first group has no transform
// lines appear blurred, because they are centered on boundary of two pixels
<g id = "blurred">
<line x1="10" y1="10" x2="110" y2="10" stroke="black" stroke-width="1"/>
<line x1="10" y1="10" x2="10" y2="100" stroke="black" stroke-width="1"/>
</g>
// second group has half pixel transform -
// lines will appear sharp because they are translated to a pixel centre
<g id="sharp" transform="translate(0.5,0.5)">
<line x1="120" y1="10" x2="220" y2="10" stroke="black" stroke-width="1"/>
<line x1="120" y1="10" x2="120" y2="100" stroke="black" stroke-width="1"/>
</g>
लेकिन इस इच्छा क्षैतिज/ऊर्ध्वाधर रेखाओं के लिए काम नहीं करते हैं जिन्हें पूर्णांक निर्देशांक के साथ परिभाषित नहीं किया जाता है, या जहां एक और परिवर्तन उन्हें पूर्णांक निर्देशांक से बाहर ले जाता है।
इसलिए यदि इस विचार का उपयोग आपकी समस्या को हल करने के लिए नहीं किया जा सकता है, तो आपको शायद 'पिक्सेल-स्नैपिंग' तकनीक की आवश्यकता हो। यह इसे चित्रित करने से पहले एक लाइन का विश्लेषण करेगा। यदि रेखा लंबवत या क्षैतिज (परिवर्तन के बाद) है तो आपको निर्देशांक समायोजित करने की आवश्यकता है ताकि वे परिवर्तन के बाद एक पिक्सेल केंद्र में समाप्त हो जाएंगे।
आप इस आम समस्या के बारे में पृष्ठभूमि जानकारी के लिए WPF Pixel Snapping स्पष्टीकरण को देखने में रुचि रखते हैं।
यह काम कर सकता है, अगर मैं एए बंद कर सकता हूं, तो यह समस्या का समाधान करेगा। –
ठीक है, यह काम करता है, केवल समस्या है, jQuery एसवीजी शैली ठीक से सेट नहीं होती है अगर आप इसे आकार कहते हैं, जैसे कि वे अपने दस्तावेज़ में संदर्भित करते हैं, इसे आकार-प्रतिपादन होना चाहिए, अन्यथा यह काम नहीं करता है। –
मुझे लगता है कि इसे 'आकार रेंडरिंग' होना चाहिए जब आप उसे DOM ऑब्जेक्ट प्रॉपर्टी के रूप में सेट कर रहे हों: 'yourElement.style.shapeRendering = "crispEdges" ', लेकिन एक स्टाइल विशेषता के अंदर इसे अपना मूल नाम रखना चाहिए। –