एसवीजी

Question

में फिक्स्ड स्ट्रोक चौड़ाई मैं एक एसवीजी तत्व पर स्ट्रोक-चौड़ाई को "पिक्सेल-जागरूक" होने में सक्षम होना चाहता हूं, जो वर्तमान स्केलिंग ट्रांसफॉर्मेशन के बावजूद हमेशा 1px चौड़ा होता है। मुझे पता है कि यह असंभव हो सकता है, क्योंकि एसवीजी का पूरा बिंदु पिक्सेल स्वतंत्र होना है।

प्रसंग इस प्रकार है:

मैं अपने viewBox के साथ एक एसवीजी तत्व है और preserveAspectRatio सेट जिम्मेदार बताते हैं। ऐसा लगता है कि

<svg version="1.1" baseProfile="full" 
    viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet" 
    xmlns="http://www.w3.org/2000/svg" > 
</svg> 

इसका मतलब है कि जब मैं उस तत्व को स्केल करता हूं, तो इसके अंदर वास्तविक आकार तदनुसार (अब तक इतना अच्छा) स्केल करते हैं।

जैसा कि आप देख सकते हैं, मैंने व्यूबॉक्स स्थापित किया है ताकि मूल केंद्र में हो। मुझे लगता है कि तत्व के भीतर एक x और एक y- अक्ष आकर्षित करने के लिए है, जो मैं इस प्रकार करना चाहते हैं:

<line x1="-1000" x2="1000" y1="0" y2="0" /> 

फिर, यह ठीक काम करता है। आदर्श रूप में, हालांकि, यह धुरी हमेशा केवल 1px चौड़ी होगी। जब मैं अभिभावक svg तत्व स्केल करता हूं तो मुझे धुरी में फटकार होने में कोई रूचि नहीं है।

तो क्या मैं खराब हूं?

Answer 1

आप vector-effect संपत्ति का उपयोग non-scaling-stroke पर सेट कर सकते हैं, the docs देखें। एक और तरीका transform(ref) का उपयोग करना है।

यह उन ब्राउज़रों में काम करेगा जो एसवीजी टिनी 1.2 से उन हिस्सों का समर्थन करते हैं, उदाहरण के लिए ओपेरा 10. फॉलबैक में ऐसा करने के लिए एक छोटी सी लिपि लिखना शामिल है, मूल रूप से सीटीएम को निष्क्रिय करना और उन तत्वों पर लागू करना जो स्केल नहीं करना चाहिए ।

यदि आप तेज लाइन चाहते हैं तो आप disable antialiasing (shape-rendering=optimizeSpeed या shape-rendering=crispEdges) और/या स्थिति के साथ खेल सकते हैं।