SVG ट्रांसफ़ॉर्म क्रम: कलाकृति का आकार और स्थान तय करें

SVG एट्रिब्यूट transform="translate(60 25) scale(2)" में मूल बिंदु के निर्देशांक पहले दो गुना होते हैं, फिर पैरेंट निर्देशांक तंत्र में जाते हुए 60 इकाइयाँ क्षैतिज और 25 लंबवत खिसकता है। सूची उलटकर scale(2) translate(60 25) करें तो वह खिसकाव भी दोगुना होता है। कलाकृति का आकार समान रहता है, लेकिन स्थान बदल जाता है।

आकार बदलने के बाद लोगो अचानक खिसके तो पाथ संपादित करने से पहले ट्रांसफ़ॉर्म सूची देखें। एक उपयोगी व्यवस्था स्थान के लिए बाहरी समूह और आकार के लिए भीतर का समूह है। दोनों काम स्पष्ट रहते हैं और बाद के संपादन के लिए मूल कलाकृति निर्देशांक उपलब्ध रहते हैं।

क्रम का अनुमान लगाने के बजाय एक बिंदु का हिसाब रखें

मूल बिंदु (10, 10) लें। 2 गुना आकार और (60, 25) खिसकाव पर दोनों सूचियाँ यह देती हैं:

दोनों बिंदु समान मूल निर्देशांक से आते हैं। दूसरी सूची कलाकृति के साथ खिसकाव को भी बढ़ाती है। उसका अंतिम स्थान पहले से (60, 25) अलग है।

क्रम के बारे में परस्पर विरोधी दिखने वाले विवरण मिल सकते हैं। SVG विनिर्देश लिखे क्रम में सूची को भीतर रखे निर्देशांक तंत्र बताता है: सबसे बायाँ ट्रांसफ़ॉर्म बाहरी समूह बनता है। मूल बिंदु को उन समूहों से बाहर जाते हुए देखें तो सबसे भीतर का काम पहले लागू होता है। W3C की transform एट्रिब्यूट परिभाषा समान समूह संरचना स्पष्ट दिखाती है।

बिंदु की गणना के लिए सबसे दाएँ फ़ंक्शन से बाएँ की ओर चलें। समूह संरचना के लिए बाहर से भीतर पढ़ें। पूरी गणना में चुनी व्याख्या एक जैसी रखें।

उसी दो हिस्सों वाले चिह्न की तुलना करें

पूरा उदाहरण transform-order.svg के रूप में सेव करें और ब्राउज़र में खोलें। इसकी कलाकृति अलग त्रिकोणीय सजावटी हिस्से वाला मौलिक चौकोर छल्ला है। सम-विषम भराव नियम से बनी खुली जगह वास्तव में खाली है।

<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400"
     viewBox="0 0 350 200">
  <g id="art" transform="translate(60 25) scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</svg>

केवल समूह एट्रिब्यूट को transform="scale(2) translate(60 25)" करें। चिह्न और दाएँ तथा नीचे जाता है, जबकि आकार और हिस्सों का अंतर समान रहते हैं।

हमने दोनों सूचियाँ और उनके समान भीतर के समूह वाला रूप ब्राउज़र में रेंडर किया। तुलना पैनल समान निर्देशांक क्षेत्र इस्तेमाल करते हैं; हल्का चिह्न मूल ज्यामिति दिखाता है। हर लाल बिंदु बताता है कि मूल (10, 10) कहाँ पहुँचता है।

मूल कलाकृति का स्थानीय बॉक्स x=10, y=10, width=95, height=40 है। पहली व्यवस्था रूट निर्देशांक सीमा x=80, y=45, width=190, height=80 बनाती है। उलटी सूची x=140, y=70 देती है, जबकि आकार वही 190 × 80 है।

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

भीतर के समूहों से स्थान और आकार अलग करें

पाथ वैसे रखते हुए मूल समूह की जगह यह संरचना रखें:

<g transform="translate(60 25)">
  <g id="art" transform="scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</g>

यह एक समूह पर translate(60 25) scale(2) के समान है। बाहरी खिसकाव बदले आकार के निर्देशांक तंत्र को रखता है। भीतर का आकार बदलने पर बाहरी खिसकाव मान (60, 25) बने रहते हैं।

इसका मतलब नहीं कि आकार बदलने पर हर दिखाई बिंदु स्थिर रहता है। स्थानीय शुरुआत से दूर बिंदु के निर्देशांक गुणा होने से वह अब भी खिसकता है। खिसकाव चुनने से पहले तय करें कि कौन-सा मूल बिंदु कलाकृति का आधार बनेगा।

मसलन, मानें छल्ले का मूल कोना (10, 10) दो गुना आकार के बाद (120, 80) पर पहुँचना चाहिए। गणना करें:

tx = targetX - scale × anchorX = 120 - 2 × 10 = 100
ty = targetY - scale × anchorY =  80 - 2 × 10 =  60

translate(100 60) scale(2) इस्तेमाल करें। कोना अब (120, 80) पर जाता है। सीधे (120, 80) खिसकाने पर वहाँ स्थानीय शुरुआत पहुँचती और कोना अधिक दाएँ तथा नीचे रहता।

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

भीतर रखी फ़ाइल का रेंडर मैपिंग पढ़ें

इंपोर्ट SVG के कई ऊपरी समूहों पर पहले से ट्रांसफ़ॉर्म हो सकते हैं। केवल निकटतम समूह का एट्रिब्यूट देखने से उनका मिला असर छूट जाता है। MDN का transform संदर्भ यह भी बताता है कि CSS प्रॉपर्टी और प्रस्तुति एट्रिब्यूट एक तत्व पर हों तो CSS ट्रांसफ़ॉर्म को प्राथमिकता मिलती है। एट्रिब्यूट बदलने से कुछ न हो तो गणना की गई शैलियाँ देखें।

रेंडर हुए इनलाइन SVG के लिए यह कोड चुने समूह के बिंदु को रूट SVG के उपयोगकर्ता निर्देशांकों में लाता है:

const root = document.querySelector('svg');
const art = document.querySelector('#art');
const rootMatrix = root.getScreenCTM();
const artMatrix = art.getScreenCTM();
if (!rootMatrix || !artMatrix) throw new Error('SVG is not measurable');
 
const toRoot = rootMatrix.inverse().multiply(artMatrix);
const point = new DOMPoint(10, 10).matrixTransform(toRoot);
const result = { x: point.x, y: point.y };

रूट का उलटा मैट्रिक्स उसके साझा स्क्रीन मैपिंग को हटाता है। यह ज़रूरी है, क्योंकि उदाहरण का 700 × 400 प्रदर्शन उसके 350 × 200 viewBox से दोगुना है। यहाँ स्क्रीन पिक्सेल और SVG निर्देशांक अलग इकाइयाँ हैं। MDN getScreenCTM() से लौटने वाली मैपिंग बताता है।

हमारी ब्राउज़र तुलना में पहली सूची और भीतर के समूहों के लिए matrix(2 0 0 2 60 25) मिला। उलटी सूची ने matrix(2 0 0 2 120 50) दिया। आकार और खिसकाव के इस उदाहरण में अंतिम दो अंक खिसकाव का अंतर स्पष्ट करते हैं।

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

कलाकृति समूह पर getBBox() से ट्रांसफ़ॉर्म किया रूट स्थान मिलने की उम्मीद न करें। getBBox संदर्भ के अनुसार उसका स्थानीय परिणाम उस तत्व का अपना और ऊपरी तत्वों के ट्रांसफ़ॉर्म छोड़ता है। चिह्न स्पष्ट खिसकने पर भी स्थानीय बॉक्स वही रह सकता है।

कलाकृति दोबारा बनाने से पहले ट्रांसफ़ॉर्म ठीक करें

SVG की प्रति पर काम करें। साथ खिसकने वाले पाथ पहचानें, फिर उनका समूह और ऊपरी समूह देखें। पहचानने योग्य आधार बिंदु और उसका इच्छित गंतव्य दर्ज करें।

एक बार में एक ट्रांसफ़ॉर्म बदलें। आकार सही लेकिन स्थान गलत हो तो दोनों क्रम से बने खिसकाव की तुलना करें। हिस्से अलग-अलग खिसकें तो साझा स्थान उन्हें रखने वाले समूह पर दें। घुमाव केंद्र को आकार क्रम के सवाल से अलग रखें।

सेव फ़ाइल गंतव्य में फिर खोलें और चिह्न की पूरी सीमा देखें। सही ट्रांसफ़ॉर्म भी कलाकृति को viewBox से बाहर या क्लिपिंग क्षेत्र में ले जा सकता है। SVG संपादन मार्गदर्शिका व्यापक सफ़ाई और एक्सपोर्ट प्रक्रिया बताती है।

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

बिटमैप वेक्टराइज़ किए बिना खिसकाया और आकार बदला जा सकता है। संपादन योग्य आकृतियाँ चाहिए तो ट्रेस करें और मौजूदा वेक्टर मूल प्रति हो तो रखें। सटीक लोगो ज्यामिति या अक्षरों के लिए हाथ से पुनर्निर्माण अब भी चाहिए हो सकता है; लोगो वेक्टराइज़ेशन मार्गदर्शिका शुरुआती तरीका चुनना समझाती है।

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

SVG ट्रांसफ़ॉर्म बाएँ से दाएँ लगाता है या दाएँ से बाएँ? सूची लिखे क्रम में बाहर से भीतर निर्देशांक तंत्र दर्शाती है। मूल बिंदु कहाँ पहुँचेगा यह गणना करते समय सबसे दाएँ फ़ंक्शन पहले लगाएँ और बाहर की ओर बाएँ चलें।

translate और scale उलटने से लोगो क्यों खिसकता है? एट्रिब्यूट सूची में scale के बाद translate होने पर scale खिसकाव को भी गुणा करता है। translate के बाद scale होने पर खिसकाव उस आकार परिवर्तन से बाहर रहता है। इसलिए वही मान अलग स्थानों पर समान आकार दे सकते हैं।

भीतर के समूह का आकार बदलने पर क्या बाहरी खिसकाव हर बिंदु स्थिर रखेगा? नहीं। यह बाहरी खिसकाव मान भीतर के आकार से अलग रखता है। स्थानीय शुरुआत से दूर बिंदु आकार बदलने पर अब भी खिसकते हैं। आधार बिंदु चुनें और उसे रखने के लिए ज़रूरी खिसकाव गणना करें।

स्रोत

1. W3C — SVG transform एट्रिब्यूट — ट्रांसफ़ॉर्म सूची और भीतर के निर्देशांक तंत्र का संबंध परिभाषित करता है।
2. MDN — SVG transform — ट्रांसफ़ॉर्म लिखावट, मैट्रिक्स मैपिंग और CSS प्राथमिकता बताता है।
3. MDN — getScreenCTM — SVG निर्देशांकों को दस्तावेज़ व्यूपोर्ट की ओर लाने वाला मैट्रिक्स बताता है।
4. MDN — getBBox — स्थानीय सीमा और मापे तत्व के ट्रांसफ़ॉर्म छोड़ना समझाता है।

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