48 घंटे के शोध के बाद, मैंने आनुपातिक स्केलिंग प्राप्त करने के लिए ऐसा किया।
नोट: यह नमूना प्रतिक्रिया के साथ लिखा गया है। आप का उपयोग नहीं कर रहे हैं, तो हाइफ़न को ऊंट मामले सामान वापस बदलने (यानी: परिवर्तन backgroundColorकरने के लिए background-colorऔर शैली बदलने के Objectएक करने के लिए वापस String)।
<div
style={{
backgroundColor: 'lightpink',
resize: 'horizontal',
overflow: 'hidden',
width: '1000px',
height: 'auto',
}}
>
<svg
width="100%"
viewBox="113 128 972 600"
preserveAspectRatio="xMidYMid meet"
>
<g> ... </g>
</svg>
</div>
यहाँ ऊपर नमूना कोड में क्या हो रहा है:
VIEWBOX
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
मिन-एक्स, मिन-वाई, चौड़ाई और ऊंचाई
अर्थात: व्यूबॉक्स = "0 0 1000 1000"
व्यूबॉक्स एक महत्वपूर्ण विशेषता है क्योंकि यह मूल रूप से एसवीजी को बताता है कि किस आकार को आकर्षित करना है और कहां। यदि आपने एसवीजी 1000x1000 पीएक्स बनाने के लिए सीएसएस का उपयोग किया था लेकिन आपका व्यूबॉक्स 2000x2000 था, तो आपको अपने एसवीजी के शीर्ष-बाएँ क्वार्टर दिखाई देगा ।
पहले दो नंबर, मिन-एक्स और मिन-वाई, यह निर्धारित करते हैं कि एसवीजी व्यूबॉक्स के अंदर ऑफसेट होना चाहिए या नहीं।
मेरे SVG को ऊपर / नीचे या बाएँ / दाएँ शिफ़्ट करना होगा
इसे देखें: व्यूबॉक्स = "50 50 450 450"
पहले दो नंबर आपके SVG को 50px और 50px ऊपर छोड़ देंगे, और दूसरे दो नंबर व्यूबॉक्स का आकार हैं: 450x450 xx। यदि आपका SVG 500x500 है, लेकिन इस पर कुछ अतिरिक्त पैडिंग है, तो आप "व्यूबॉक्स" के अंदर इसे स्थानांतरित करने के लिए उन नंबरों को जोड़ सकते हैं।
इस बिंदु पर आपका लक्ष्य उन नंबरों में से एक को बदलना है और देखना है कि क्या होता है।
आप व्यूबॉक्स को पूरी तरह से छोड़ भी सकते हैं, लेकिन तब आपका माइलेज उस समय आपके पास मौजूद हर दूसरी सेटिंग के आधार पर अलग-अलग होगा। मेरे अनुभव में, आप पहलू अनुपात को संरक्षित करने के मुद्दों का सामना करेंगे क्योंकि व्यूबॉक्स पहलू अनुपात को परिभाषित करने में मदद करता है।
संभावित अनुपात को बनाए रखें
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
मेरे शोध के आधार पर, कई अलग-अलग पहलू अनुपात सेटिंग्स हैं, लेकिन डिफ़ॉल्ट को कहा जाता है xMidYMid meet। मैंने स्पष्ट रूप से खुद को याद दिलाने के लिए इसे खदान पर रखा। xMidYMid meetयह मध्य बिंदु X और Y के आधार पर समानुपातिक रूप से बनाता है। इसका मतलब है कि यह व्यूबॉक्स में केंद्रित रहता है।
चौड़ाई
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Net
ऊपर मेरा उदाहरण कोड देखें। ध्यान दें कि मैंने केवल चौड़ाई कैसे निर्धारित की, कोई ऊँचाई नहीं। मैंने इसे 100% पर सेट किया है ताकि यह कंटेनर को भर दे। यह वही है जो इस स्टैक ओवरफ्लो प्रश्न का उत्तर देने में सबसे अधिक योगदान दे रहा है।
आप इसे चाहे जितने पिक्सेल मूल्य में बदल सकते हैं, लेकिन मैं 100% का उपयोग करने की सलाह दूंगा जैसे मैंने इसे अधिकतम आकार तक उड़ाने और फिर इसे पेरेंट कंटेनर के माध्यम से सीएसएस के साथ नियंत्रित किया। मैं यह सलाह देता हूं क्योंकि आपको "उचित" नियंत्रण मिलेगा। आप मीडिया क्वेरी का उपयोग कर सकते हैं और आप पागल जावास्क्रिप्ट के बिना आकार को नियंत्रित कर सकते हैं।
सीएसएस के साथ स्कोरिंग
फिर से ऊपर मेरे उदाहरण कोड को देखें। ध्यान दें कि मेरे पास ये गुण कैसे हैं:
resize: 'horizontal', // you can safely omit this
overflow: 'hidden', // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',
यह अतिरिक्त है, लेकिन यह आपको दिखाता है कि उचित पहलू अनुपात को बनाए रखते हुए उपयोगकर्ता को एसवीजी का आकार बदलने की अनुमति कैसे दी जाए। क्योंकि एसवीजी अपने स्वयं के पहलू अनुपात को बनाए रखता है, आपको केवल मूल कंटेनर पर चौड़ाई बदलने योग्य बनाने की आवश्यकता है, और यह वांछित के रूप में आकार बदल जाएगा।
हम अकेले ऊंचाई छोड़ते हैं और / या इसे ऑटो पर सेट करते हैं, और हम चौड़ाई के साथ आकार को नियंत्रित करते हैं। मैंने चौड़ाई को उठाया क्योंकि यह उत्तरदायी डिजाइनों के कारण अक्सर अधिक सार्थक है।
यहां इन सेटिंग्स की एक छवि का उपयोग किया जा रहा है:
यदि आप इस प्रश्न का हर हल पढ़ते हैं और अभी भी उलझन में हैं या आपको जो कुछ भी चाहिए, वह नहीं देख रहे हैं, तो इस लिंक को यहाँ देखें। मैंने इसे बहुत उपयोगी पाया:
https://css-tricks.com/scale-svg/
यह एक विशाल लेख है, लेकिन यह सीवीजी के साथ या बिना सीएसएस के हेरफेर करने के लिए हर संभव तरीके से टूट जाता है। मैं आपको कॉफ़ी पीते समय या चुनिंदा तरल पदार्थों का चयन करते हुए इसे पढ़ने की सलाह देता हूं।
