SVG Transform Origin: चित्र को अपने केंद्र के चारों ओर घुमाएँ

CSS से SVG चित्र को उसके अपने केंद्र के चारों ओर घुमाने के लिए संबंधित पाथ एक समूह में रखें और उस समूह पर transform-box: fill-box तथा transform-origin: center लागू करें। फिर वहीं घुमाव लागू करें। दोनों गुण अलग प्रश्नों का उत्तर देते हैं: संदर्भ किस आयत से मिलता है और उस आयत के अंदर धुरी कहाँ है।

यदि आयात किया गया आइकन कैनवस पर झूलता हुआ खिसकता है, तो पाथ निर्देशांक बदलने से पहले उस संदर्भ को देखें। यदि उसके हिस्से अलग-अलग घूमते हैं, तो देखें कि किन एलिमेंट को ट्रांसफ़ॉर्म मिल रहा है। मौजूदा वेक्टर चित्र में आमतौर पर समूह या ट्रांसफ़ॉर्म सुधार चाहिए; ट्रेसिंग केवल तब उपयोगी है जब पहले रास्टर स्रोत से संपादन योग्य पाथ चाहिए हों।

केवल center देने पर भी चित्र क्यों खिसक सकता है

पाथ या समूह जैसे सामान्य SVG चाइल्ड का डिफ़ॉल्ट ट्रांसफ़ॉर्म मूल बिंदु 0 0 है। रूट SVG एलिमेंट का डिफ़ॉल्ट अलग है। डिफ़ॉल्ट transform-box: view-box के साथ मूल बिंदु center रखने का संदर्भ चित्र की अपनी सीमा के बजाय SVG संदर्भ व्यूपोर्ट होता है। MDN का SVG transform-origin संदर्भ डिफ़ॉल्ट और इन अपवादों को समझाता है।

इसलिए लोगो के आसपास खाली जगह मायने रखती है। बड़े ड्रॉइंग क्षेत्र के एक कोने में रखे छोटे प्रतीक का केंद्र उस ड्रॉइंग क्षेत्र के केंद्र से अलग होता है। transform-box: fill-box संदर्भ को एलिमेंट के ऑब्जेक्ट बाउंडिंग बॉक्स पर बदल देता है। इससे SVG क्रॉप नहीं होता और खाली जगह नहीं हटती। transform-box संदर्भ उपलब्ध बॉक्स परिभाषित करता है, जिनमें स्ट्रोक सहित संदर्भ चाहिए होने पर stroke-box भी है।

दो पाथ को एक चिह्न की तरह घुमाएँ

इस पूरे उदाहरण को rotation.svg के रूप में सहेजें और ब्राउज़र में खोलें। इसमें मौलिक चौकोर आकार और अलग त्रिकोणीय सजावटी हिस्सा है, दोनों निर्देशांक मूल बिंदु से दूर हैं। CSS SVG के अंदर है ताकि स्वतंत्र फ़ाइल अपना घुमाव नियम साथ रखे।

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="360" viewBox="0 0 280 210"
  role="img" aria-label="Two-piece artwork rotated around its shared center">
  <style>
    .artwork {
      transform-box: fill-box;
      transform-origin: center;
      transform: rotate(35deg);
    }
  </style>
  <g class="artwork">
    <path fill="#147d78" d="M80 50H160V130H80Z" />
    <path fill="#ed9750" d="M170 70L220 90L170 110Z" />
  </g>
</svg>

घुमाव से पहले संयुक्त चित्र x = 80 से 220 और y = 50 से 130 तक है। उसका बॉक्स 140 इकाइयाँ चौड़ा और 80 इकाइयाँ ऊँचा है, इसलिए केंद्र (150, 90) है। समूह घूमने पर चौकोर और सजावटी हिस्सा अपना आपसी संबंध बनाए रखते हैं।

हमने उन्हीं पाथ की चार निश्चित कोण वाली अवस्थाएँ ब्राउज़र में रेंडर कीं, उनकी ज्यामिति पढ़ी और ऊपर का पूरा SVG अलग से दोबारा खोला। तुलना में डिफ़ॉल्ट मूल बिंदु वाले परिणाम के लिए जगह देने हेतु चौड़े देखने के क्षेत्र हैं। ये हाथ से लिखे प्रदर्शन पाथ हैं, PerfectVector रूपांतरण आउटपुट या हर ब्राउज़र और संपादक का परीक्षण नहीं।

डिफ़ॉल्ट मूल बिंदु वाला संस्करण चिह्न को (0, 0) के चारों ओर घुमाता है। केंद्रित समूह वाले दोनों संस्करण मेल खाते हैं। अंतिम पैनल में चौकोर (120, 90) पर घूमता है, जबकि त्रिकोणीय हिस्सा (195, 90) पर। हर हिस्सा अपनी शुरुआती स्थिति के पास रहता है, लेकिन चिह्न अब एक ऑब्जेक्ट की तरह नहीं घूमता।

अपनी फ़ाइल में केवल वे हिस्से चुनें जिन्हें साथ चलना चाहिए। पृष्ठभूमि आयत, रजिस्ट्रेशन चिह्न या दूर के अनचाहे पाथ समूह की सीमा बढ़ा सकते हैं। SVG संपादन कार्यप्रवाह व्यवहार जोड़ने से पहले फ़ाइल जाँचना और साफ़ करना बताता है।

जब धुरी डिज़ाइन का चुनाव हो, तो स्पष्ट निर्देशांक इस्तेमाल करें

SVG ट्रांसफ़ॉर्म एट्रिब्यूट सीधे कोण और धुरी बता सकता है। उदाहरण में <g class="artwork"> को <g transform="rotate(35 150 90)"> से बदलें। दोनों पाथ उसके अंदर रखें। क्लास हटाने से CSS ट्रांसफ़ॉर्म भी एट्रिब्यूट पर प्राथमिकता लेना बंद करता है।

एट्रिब्यूट का rotate(angle cx cy) रूप पहले डिग्री और उसके बाद वर्तमान यूज़र निर्देशांक प्रणाली में धुरी लेता है। CSS rotate(35deg) का सिंटैक्स अलग है और उसका मूल बिंदु अलग गुण से आता है। यदि CSS ट्रांसफ़ॉर्म और SVG ट्रांसफ़ॉर्म एट्रिब्यूट दोनों उसी एलिमेंट पर हों, तो CSS की प्राथमिकता होती है। MDN का ट्रांसफ़ॉर्म एट्रिब्यूट संदर्भ देखें।

स्पष्ट निर्देशांक कब्ज़े, सूई या जानबूझकर केंद्र से हटाई गई लोगो धुरी के लिए उपयोगी हैं। उन्हें घुमाए जाने वाले समूह की स्थानीय निर्देशांक प्रणाली में रखें। स्क्रीन पर मापा निर्देशांक अपने आप ऐसा निर्देशांक नहीं बनता जिसे नेस्टेड SVG समूह में चिपका सकें।

यदि मौजूदा समूह में पहले से स्थिति तय करने वाला ट्रांसफ़ॉर्म है, तो उसे सुरक्षित रखें और चित्र को रखने वाले नए अंदरूनी समूह पर घुमाव रखें। फिर निर्यात की गई फ़ाइल जाँचें। मौजूदा ट्रांसफ़ॉर्म बदलने से वह स्थानांतरण या पैमाना हट सकता है जिसने चिह्न की स्थिति तय की थी। यदि पैमाना बदलने से चिह्न भी खिसकता है, तो SVG ट्रांसफ़ॉर्म क्रम उदाहरण बताता है कि स्थानांतरण और स्केलिंग कैसे मिलते हैं।

केंद्र निकालने से पहले सीमाएँ पढ़ें

इस उदाहरण जैसे साधारण समूह के लिए केंद्र की गणना है:

cx = x + width / 2
cy = y + height / 2

हमारे ब्राउज़र माप में समूह पर getBBox() ने x: 80, y: 50, width: 140 और height: 80 लौटाए। उसके अपने घुमाव ने ये स्थानीय बॉक्स मान नहीं बदले। getBBox दस्तावेज़ इन यूज़र-स्पेस मानों को getBoundingClientRect() से अलग करता है, जिसका आयत ब्राउज़र व्यूपोर्ट के सापेक्ष होता है।

चयन आउटलाइन या फ़िट किए गए viewBox के लिए SVG बाउंडिंग बॉक्स कार्यप्रवाह इन निर्देशांक प्रणालियों के बीच रूपांतरण और स्ट्रोक मार्जिन जाँचना बताता है।

जिस एलिमेंट को घुमाना चाहते हैं, उसी को मापें। चाइल्ड ट्रांसफ़ॉर्म उन्हें रखने वाले समूह की सीमा को प्रभावित कर सकते हैं: अलग-अलग घूमे चाइल्ड वाले हमारे समूह की सीमा मूल जोड़ी से अलग थी। ऊपर के सरल मान फिर इस्तेमाल करने से पहले रैपर, नेस्टेड पैमाना या अनचाहा आकार जाँचने योग्य है।

बॉक्स का केंद्र हमेशा दृश्य केंद्र नहीं होता

इस उदाहरण का चौकोर अपने त्रिकोणीय हिस्से से कहीं अधिक क्षेत्र घेरता है। फिर भी उनके संयुक्त बॉक्स का मध्य सबसे बाएँ और सबसे दाएँ किनारे के बीच आधे रास्ते पर होता है। यह ज्यामितीय नियम है; यह नहीं आँकता कि घूमते समय डिज़ाइन संतुलित दिखता है या नहीं।

बॉक्स के केंद्र से शुरू करें, चिह्न कई कोणों पर देखें और यदि डिज़ाइन माँगे तो स्पष्ट धुरी अपनाएँ। घड़ी की सूई को आमतौर पर अपना जुड़ाव बिंदु चाहिए। केंद्र से हटे सजावटी हिस्से वाले लोगो को डिज़ाइनर का चुना केंद्र चाहिए हो सकता है। इस निर्णय को गलती से व्यूपोर्ट आधारित मूल बिंदु मिलने के सुधार से अलग रखें।

घुमाव को जगह भी चाहिए। बिना घूमे चित्र के आसपास बहुत कसा हुआ निर्यात उसके घूमने पर कोने काट सकता है। देखने के क्षेत्र में पर्याप्त जगह छोड़ें और पैरेंट की क्लिपिंग जाँचें। यदि पूरी फ़ाइल गलत पैमाने पर आयात होती है, तो अलग हिस्से बदलने से पहले SVG आकार निदान इस्तेमाल करें।

यह कार्यप्रवाह मौजूदा आकार को उसका कंटूर दोबारा लिखे बिना घुमाता है। यदि उद्देश्य एक आउटलाइन को दूसरी में बदलना है, तो SVG मॉर्फ मार्गदर्शिका पाथ ज्यामिति मिलाने की अलग समस्या बताती है।

धुरी तय करने से पहले स्रोत तैयार करें

यदि आइकन केवल PNG या JPG में है और उसके अलग आकार संपादित करने हैं, तो PerfectVector एक SVG विकल्प तैयार करने में मदद कर सकता है। चित्र को वेक्टर में बदलें, बाहरी आकृति और अलग बारीकियाँ देखें, फिर साथ घूमने वाले हिस्सों को समूह में रखें। समूह मापने से पहले अनचाहे पृष्ठभूमि आकार जाँचें।

बिटमैप बिना ट्रेसिंग के पूरा घूम सकता है। वेक्टराइज़ेशन तब करें जब संपादन योग्य ज्यामिति काम का हिस्सा हो। यदि उपयोगी वेक्टर मूल फ़ाइल पहले से है, तो उसे रखें; ट्रांसफ़ॉर्म मूल बिंदु बदलने से खराब कंटूर ठीक नहीं होता और रास्टर प्रति ट्रेस करना अनावश्यक पुनर्निर्माण चरण जोड़ता है।

फ़ाइल सौंपने से पहले वही SVG अपने गंतव्य में दोबारा खोलें। सुनिश्चित करें कि इच्छित हिस्से साथ घूमते हैं, धुरी आपकी चुनी जगह रहती है और घूमे चित्र को पर्याप्त जगह है। आगे संपादन के लिए अपरिवर्तित मूल फ़ाइल रखें। ब्लॉग के SVG कार्यप्रवाह लेख संबंधित तैयारी और निर्यात जाँच बताते हैं।

अक्सर पूछे जाने वाले प्रश्न

transform-origin: center मेरा SVG कैनवस के चारों ओर क्यों घुमाता है? डिफ़ॉल्ट view-box संदर्भ इस्तेमाल करने वाले SVG चाइल्ड के लिए center SVG संदर्भ व्यूपोर्ट को दर्शाता है। यदि उसके ऑब्जेक्ट बाउंडिंग बॉक्स का संदर्भ चाहिए, तो घुमाए जाने वाले एलिमेंट पर transform-box को fill-box रखें।

मुझे समूह घुमाना चाहिए या हर पाथ? जब हिस्सों को एक चिह्न की तरह चलना हो, तो समूह घुमाएँ। हर पाथ पर fill-box और center लागू करने से हर हिस्से को अपनी धुरी मिलती है, जिससे उनकी संयुक्त व्यवस्था बदलती है।

क्या fill-box center असममित लोगो को संतुलित दिखाएगा? यह ऑब्जेक्ट के बाउंडिंग बॉक्स का केंद्र चुनता है। दृश्य संतुलन के लिए अलग धुरी चाहिए हो सकती है, इसलिए लोगो कई कोणों पर देखें और आवश्यकता होने पर स्पष्ट निर्देशांक चुनें।

स्रोत

1. MDN — SVG transform-origin — SVG मूल बिंदु के डिफ़ॉल्ट, रूट एलिमेंट के अपवाद और संदर्भ बॉक्स संबंध परिभाषित करता है।
2. MDN — transform-box — ऑब्जेक्ट, स्ट्रोक और व्यूपोर्ट संदर्भ बॉक्स परिभाषित करता है।
3. MDN — SVG transform — स्पष्ट घुमाव निर्देशांक, समूह ट्रांसफ़ॉर्म और CSS प्राथमिकता बताता है।
4. MDN — getBBox — स्थानीय ज्यामिति माप और व्यूपोर्ट आयत से उनका अंतर समझाता है।

रास्टर स्रोत से संपादन योग्य आकार चाहिए? PerfectVector से SVG तैयार करें, वापस मिले हिस्से देखें, फिर उन्हें समूह में रखकर अंतिम निर्यात की गई फ़ाइल में चुनी धुरी जाँचें।